HTML & CSS
So here is a weird one.
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:
padding:0px 0px 15px 0px;
border:6px solid #d8d8d8;
margin:0px 0px 0px 0px;
padding:8px 10px 10px 10px;
background:#444 url('/forums/e90garageimg/cpbg.gif') repeat-x;
border-right:1px solid #cacaca;
<div style="float:left;"><b>Latest Additions</b></div>
A div needs a width setting for float to mean anything. An alternative is to give the non-floated div a big left margin:
<font color='"Red"'>margin-left: 420px;</font>
Thanks, but question, if I add a width then the item is no longer fluid in width, is it not possible to float a fluid width div?
I tried your margin-left trick and that did work to position it correctly, but in IE the width of that garmaincpright is longer fluid either..
It should be fluid. Could you post your entire page with CSS so we can test it?
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.
zoom:1.0;/* ie7 and under fix to do the same job as overflow*/
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.
This topic is now closed. New replies are no longer allowed.