This content column is actually first in the html (apart from the header which if a fixed height could be absolutely placed if you were that desperate). The centre and left columns are floated left and the right column is floated right.
Usually this would mean that the centre column would actually be on the left due to the order of the html. We can move the centre column simply with minimal code by using relative positioning. Although I tell people not to use relative positioning for structural layout it can be quite useful when you know what you are doing.
All we simply need to do is move the centre column left by 150px which is the width of the left column. Then we move the left column in the opposite direction (left -450px, which is the width of the centre column) again with relative positioning.
#leftmenu {
width: 139px;
height: auto;
margin: 0px 10px 0px 0px;
border-right: 1px solid #C8C8C8;
background-color: #f2f2f2;
display: inline;
float: left;
position:relative;
left:-450px
}
#content {
width: 450px;
background: #fffccc;
text-align: left;
color: #000;
float:left;
position:relative;
left:150px;
}
The reason we use Relative Positioning is that it moves elements visually but not physically. Although the element may look as though it is somewhere else it is in fact still in its original position as far as everything else on the page is concerned. That is, it has no effect on the flow of the document apart from the effect of its original positioning. Technically reletive positining moves an element in relation to itself but the space that the element previously occupied is preserved.
This is useful in our example because we can simply juxtapose the column positions and not cause any affect to anything else at all.
The benefit of this technique is that you don't need to alter the html one little bit and no non-semantic extra wrappers are used as in other methods.
IE7 Bug
It has been noticed that in IE7 you can adjust the text-size using the zoom function from the browser and the left column gets misplaced. This seems to be a bug In IE7's zoom but it can be avoided if instead of using relative positioning we use simple margins instead.
These would be all the changes you need to make (marked in bold).
#leftmenu {
width: 140px;
height: auto;
margin: 0px 10px 0px 0px;
background-color: #f2f2f2;
display: inline;
float: left;
position:relative;
margin-left:-600px
}
#content {
width: 450px;
background: #fffccc;
text-align: left;
color: #000;
float:left;
position:relative;
margin-left:150px;
}