Side by side divs, equal heights, IE7+

Question

I am trying to avoid using layout table in this jsFiddle, and I need to come up with more semantic and generic markup plus CSS.

There is an image in the left column and description in the right column.

There are few challenges, however: we don't know any pixel dimensions, and description may be quite long, which is why we cannot simply float two divs side by side.

Image also needs to be vertically aligned, but we don't know container height or image size.

Display: table is not an option. Javascript is not an option

<table>
 <tr>
    <td class="image">
        <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png">
    </td>

    <td class="description">
        <p>Left section only needs to be as wide as image is, and we don't know pixel size of the image. It has to be vertically centered.</p>

        <p>Right section should take all available space left</p>

        <p>We do not know how much text will be in the right section.</p>            
        <p>We can not use display: table since solutions needs to work in IE7 as well</p>                        
    </td>
  </tr>
<table>

Please throw any ideas:)

Answer 1

Here's your solution:

http://jsfiddle.net/ZXfFG/3/

Explanation:

So you have 2 problems: 1) Adjusting the width and height of the 2 columns. 2) Positioning the image vertically.

Solutions:

1) the left column's width will adjust automatically because it will adjust to the its child's (image) width. setting its float property to left will stick the text right next to it. This is fine when the text is shorter than the image, but what if it's longer like you mentioned? then you will get something like this:

so we need to make the right column behave like a rectangle. Normally you would set the height of the left column to 100% and that would take care of the problem, but that won't work since its parent doesn't have a fixed height. Anyway, setting the overflow property of the right column will take care of this problem.

.right {
    overflow:hidden;
}

2) Setting the image centered vertically is impossible without JavaScript or using a table layout. but here's what you can do: hide the image by setting its visibility to hidden, this way the left column will still take its width. and then set the background image of the parent container to the image and position it left center.

.container {
    background:url("http://www.sourcegate.com/images/stackoverflow-logo.png") left center no-repeat;  
}

That concludes the non-js, non-table solution, but If somewhere in your heart you want find that you want to give javascript a try, there are a lot of ways of doing it, but this is what I would do: (1 line of code)

​$(".container").css('padding-left', $('img').width() + "px");​​​​​​​​​​​​​​​​

http://jsfiddle.net/GtEdc/