SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    PHP Code:
    .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
    PHP Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by darkus View Post
    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.
    A div needs a width setting for float to mean anything. An alternative is to give the non-floated div a big left margin:

    Code:
    .garmaincpright {
      margin-left: 420px;
      position:relative;
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    A div needs a width setting for float to mean anything. An alternative is to give the non-floated div a big left margin:

    Code:
    .garmaincpright {
      margin-left: 420px;
      position:relative;
    }
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It should be fluid. Could you post your entire page with CSS so we can test it?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by darkus View Post
    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?

    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.

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

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •