How To Achieve Layout Goal - Two Column

Not to start a big debate about tables vs css - here goes I have a two column layout I want to achieve as you can see here: http://jsfiddle.net/p5S5J/1/ (not to scale) Here is my a

Solution 1:

So, I'm making a proper answer out of my comment. I've improved the CSS slightly.

See:http://jsfiddle.net/2WUgK/

I'm not convinced this isn't Voodoo yet

This will work in IE7+ and all modern browsers. The voodoo is thoroughly explained here :)

HTML:

<div id="my-container">
    <div id="column-1" class="layout">Hi!</div>
    <div id="column-2" class="layout">Hello</div>
</div>

CSS:

#my-container {
    width: 200px;
    border: 1px solid red;
    padding: 6px6px6px0;
}
#column-1 {
    margin: 06px;
    padding: 6px;
    width: 60px;
    float: left;
}
#column-2 {
    padding: 6px;
    overflow: hidden;
}
.layout {
    border: 1px solid blue;
    height: 120px;
}

Solution 2:

I have created the layout you were looking for. Simple use of Float, and Clear (css elements) http://jsfiddle.net/louis002/ZWGfQ/10/

Solution 3:

I prefer using tables since it seems to be more cross browser friendly. But I hear you, so what i've done when i use div tags is "float" the left column left and float the right column right

<divstyle="float:left;">left column</div><divstyle="float:right:">right column</div>

I've had better luck with this than specifying widths since some browsers may not display it right or if i have dynamic data inside of it and it shifts, boom! your page is now all out of sorts.