CSS Floating Div problem

  • Resolved cbridges

    (@cbridges)


    11 years, 4 months ago

    Hi all,
    I know this is basic but it’s not working for me (I have done this in the past with no problem) What I am trying to do is, on the front page of my test site, float two divs. On one side I will have a picture and on the other I will have a description. Then below this have another set of floated divs only this time the picture will be on the opposite side as the one above it (e.g, first row picture on left discription on right, second row description on left and picture on right). I will have about 6 rows of these floated divs (I am trying to not use a table). For some reason my picture and description are not staying on the same line. Or when I get them on the same line, the border I have set between them does not show. I don’t know if I have looked at it so long that I am just overlooking something basic. Heres a link to my test site my code I am using to float divs is as follows

    .pdiv {
	clear:both;
	}

.left_1 {

        float: left;

}

.right_1 {

        float: right;
	border-left-width:thin!important;
	border-left-style:solid !important;
	border-left-color:#2d4262 !important;
	padding-left: 6px !important;
	margin-left: 6px;
}

.left_2 {

        float: left;
	border-right-width:thin!important;
	border-right-style:solid !important;
	border-right-color:#2d4262 !important;
	padding-right: 6px !important;
	margin-right: 6px;
}

.right_2 {

        float: right;
	padding-left: 6px;
}

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter cbridges

    (@cbridges)

    Here is the html I am using

    <div class="pdiv"><div class="left_1">Picture</div>
<div class="right_1">Description</div></div>

<hr/>

<div class="pdiv"><div class="left_2">description</div>
<div class="right_2">Picture</div></div>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    On one side I will have a picture and on the other I will have a description. Then below this have another set of floated divs only this time the picture will be on the opposite side as the one above it (e.g, first row picture on left discription on right, second row description on left and picture on right). I will have about 6 rows of these floated divs (I am trying to not use a table).

    Can you illustrate this for clarity?

    Thread Starter cbridges

    (@cbridges)

    What I am wanting to do is to have the image and description float on the same line, with a border between the two. I will have several “rows” like this, only the image will be on the opposite side each time.
    e.g,
    text with description | Image
    Image | text with description
    Text with description | Image
    Image | Text with description

    but what I am getting is:

    text with description |
    Image
    text with description
    | Image

    It’s like the text is not wrapping and not allowing the <div> to fit. Hopefully this makes sense.
    Thanks!

    Hi cbridges,

    You need to give at least .right_1 (and any other blocks like it) a width (though I would suggest giving both a fixed width). Once you do this you should be all set.

    Looks like you need a width (less than 50%) on the divs:

    .right_1 {
    width: 49%;
}

.left_1 {
    float: left;
    width: 49%;
}

    Thread Starter cbridges

    (@cbridges)

    bencaplan and WPyogi, adding width worked! Thank you. What do I need to put in the css to make the image align vertically “center” in the the div? I have tried vertical-align: middle; but that doesnt seem to work. I set the display to block but then I don’t see the border that I have set for the other div that will be floated in the same row. The two divs that will use an image will be assigned these classes

    }

.left_1 {
        float: left;
 }
.right_2 {
        float: left;
}

    Thanks!

    What do I need to put in the css to make the image align vertically “center” in the the div?

    I don’t think there’s a way to do that unless you set a fixed height for the div and then set a top/bottom margin for the image.

    Thread Starter cbridges

    (@cbridges)

    Thank you WPyogi, maybe I will just resize my images to fill the entire div so I don’t have to try to center them.
    Thank you all again. I appreciate the help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS Floating Div problem’ is closed to new replies.