Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

class="container"> class="right"> right content fixed width class="left"> left content flexible width

CSS:

.container { height: auto; overflow: hidden; } .right { width: 180px; float: right; background: #aafed6; } .left { float: none; /* not needed, just for clarification */ background: #e8f6fe; /* the next props are meant to keep this block independent from the other floated one */ width: auto; overflow: hidden; }