I have a fluid width container div container which has two child divs, both of them float:left;. The first one has a fixed width, while the second has no width (so it will be fluid). The second div properly floats in IE, but in Chrome/FF/Safari, it will not float. I cant understand what Im doing with otherwise simple CSS. Here is the example of what I have:
Yes you can float a fluid width float but if it contains text content then it will be as wide as the text content that it holds which means it will try to be 100% wide of the containing block. There is no room for anything to be next to an element that is 100% wide so it must occupy the whole line.
The text won’t just flow in the available space it will stretch the float until it can occupy 100% width of the containing block which means dropping below other floats to find room.
As Ralph said you could just apply a margin-left to the right column (no float at all) and it will stay clear.
A better techique is to use overflow:hidden instead which will create a rectangular block to the side.
.garmaincpright {
/*float:left;*/
position:relative;
overflow:hidden;
zoom:1.0;/* ie7 and under fix to do the same job as overflow*/
padding:0 10px;
}
This will contain floated children and there will be no clearing issues unlike the margin-left routine. Of course if you need visible overflow then you may want to use the margin-left method instead.
However for robustness you will want to nest an inner element inside that div and set it to 100% wide and floated otherwise any cleared floats in that section will clear the left column also.