How do I get two div tags to align horizontally with CSS?

Question

How do I get two div tags to align horizontally with CSS?

I have two div tags. One contains text and one contains an image. They are both side by side, and I want the text in the first div to align to the bottom of the image. The image is to the right of the text.

Or it should be this way. When I play with various CSS options things start jumping around.

Answer 1

If I'm reading your situation right, you have a situation like:

<div id="some_text">
     This is some text.
</div>
<div id="some_image">
   <img src="some_img.png" />
</div>

And you want the text in the first div to start at the bottom of the image in the second div, like:

                             |-------------------|
                             |                   |
                             |     Some Image    |
                             |                   |
                             |                   |
                             |-------------------|
            Some Text

Since the two divs are independent of each other, there is no default way to pull this off. One thing to try is setting the width of both divs, floating the image div to the right, and then using the clear property to make sure that the second div is under the first div, like:

#some_image {
     width: 50%;
     float: right;
 }

#some_text {
    width: 50%;
    clear: right;
}

Not sure if that will work perfectly, but give it a try.

Answer 2

Not sure why you are getting the results you are. What browsers have you tested this on? By default div elements are block level, meaning they should stack on top of each other and stretch the full length of the screen. You should not have to do any additional formatting to get div elements to stack. The code below will give you what you want. You can do this:

<style type="text/css">
    .imageContainer {
        width: yourWidth;
        height: yourHeight;
    }

    .textCenter {
        text-align: center;
    }
</style>


<div class="textCenter imageContainer">
    <img src="yourSourceHere">
    <div> Your text Here </div>
</div>

Answer 3

I'm not sure if this is what you are asking for, but you could relative position #some_image to the bottom of the div wrapping the two you have mentioned. Otherwise, just put the text and the image in the same div, like:

<div id="some_div">
     This is some text.
   <img src="some_img.png" />
</div>

If you don't float the image, then the text should be aligned to the bottom line of the div and, thus, aligned to the bottom of the image.

Edit: Yeah I just realized this is 2 months old, sorry.