darkus — 2011-06-10T18:27:27-04:00 — #1
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>
ralphm — 2011-06-10T21:19:20-04:00 — #2
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>
darkus — 2011-06-14T09:15:21-04:00 — #3
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..
ralphm — 2011-06-14T12:11:51-04:00 — #4
It should be fluid. Could you post your entire page with CSS so we can test it?
paulob — 2011-06-14T12:26:46-04:00 — #5
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.