Fluid width floated div will not actually float in Chrome/Safari

HTML & CSS
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:

CSS


.garmain2
 {
 background:#fff;
 padding:0px 0px 15px 0px;
 border:6px solid #d8d8d8;
 border-top:0;
 }
.garmaincpleft
 {
 float:left;
 width:400px;
 min-height:500px;
 margin:0px 0px 0px 0px;
 padding:8px 10px 10px 10px;
 background:#444 url('/forums/e90garageimg/cpbg.gif') repeat-x;
 color:#ddd;
 border-right:1px solid #cacaca;
 }
.garmaincpright
 {
 float:left;
 position:relative;
 }

The HTML


<div class="garmain2">
 
  <div class="garmaincpleft">
    Title
    <div style="padding:12px;"></div>
    $listitems
  </div>

  <div class="garmaincpright">
     <div style="float:left;"><b>Latest Additions</b></div>
     <div class="garalbumlist1">
       $album_list
     </div>

     <div style="clear:both;"></div>
  </div>

<div style="clear:both;"></div>
</div>

Thank you!!

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:

.garmaincpright {
  [COLOR="Red"]margin-left: 420px;[/COLOR]
  position:relative;
}
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…

Thanks!

4

It should be fluid. Could you post your entire page with CSS so we can test it?

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.


.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.


.garmaincpright {
    /*float:left;*/
    position:relative;
   margin-left:420px;
}

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.