Wrapping floats in a float

If you work with css floats much you’ll eventually come across this problem:

2 floated elements inside a container. The container doesn’t expand to contain the floats. There are a lot of solutions to this, such as sticking in an element to clear the floats (bleh) before closing the container, using the :after pseudo-class to inject something to clear the floats, or setting a fixed height for the container, using a min-height workaround – the list goes on. The simple, all-conquering method of getting around this problem? Float the container too:

This article has been copied from http://www.yongfook.com/items/view/81/10-dirty-little-web-development-tricks

CSS 2 column: variable/fixed widths

The following works for IE, FF and Chrome

Left column is 100% and the right column is fixed

 

div#mainTopContainer{

margin-top:10px;

margin-bottom:10px;

height:200px;

}

 

div#mainTopLeftContainer{

border:1px solid #999;

height:200px;

margin-right:200px;

padding:0px;

}

 

div#innerMainTopLeftContainer{

padding:10px;

}

 

div#innerInnerMainTopLeftContainer{

 

}

 

div#mainTopRightContainer{

float:right;

width:200px;

height:200px;

border:1px solid #999;

}

 

div#innerMainTopRightContainer{

padding:10px;

}