SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 vs FF - Floating div issue

    I'm trying to implement something relatively simple, two floated divs stacked on top of each other that are floated to the right and a div on the left that starts at the same height as the first right div.

    This works fine for me in FF but in IE the div on the left starts below the other divs - code below:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style>
    #boxr1{
    background-color:#FFFFFF;
    border:3px solid #DDDDCA;
    float:right;
    width:420px;
    
    }
    
    #boxr2{
    
    background-color:#FFFFFF;
    border:3px solid #DDDDCA;
    float:right;
    width:420px;
    
    }
    
    #boxleft{
    border:3px solid #DDDDCA;
    color:#277491;
    width:300px;
    }
    
    </style>
    </head>
    <body>
    <div style="width:800px">
    	<div id="boxr1">test<br/>test<br/></div>
    	
    	<div id="boxr2">test2<br/>test2<br/></div>
    
    	<div id="boxleft">leftdiv</div>	
    </div>
    <div style="clear:both;"></div>
    </body>
    </html>
    Any ideas which IE bug this is and how to work around it?

  2. #2
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I consider myself a noob so looking for others to respond, but your container div is 800 pixels while the combined width of your floats is over 800 which is pushing the left div down? I changed the 800 to 1158, 420+420+300+6+6+6, and it seemed to work for both browsers after that.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes he is correct. Good job!!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

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
  •