#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2007
    Posts
    3
    Rep Power
    0

    Floated divs aren't floating in firefox


    The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box.

    I'm new to inserting code, but I'll give it a try:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Transitional//EN"
        
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    	<title>linking to style sheets 2</title>
    
    <style type="text/css">
    
    body {
    background-color: #ccccff;
    
    }
    
    h1 {
    font: bold 20px arial, tahoma, verdana;
    color: #6633ff;
    border-bottom: 1px solid #444444;
    margin: 25px 0;
    padding: 5px;
    }
    
    p {
    font: 15px verdana;
    line-height: 1.5em;
    color: #000077;
    margin: 0;
    padding: 0;
    }
    
    .leftbox {
    width: 300px;
    background-color: #ffffff;
    padding: 10px;
    margin: 10px 10px;
    float: left;
    }
    
    .rightbox {
    width: 300px;
    padding: 10px;
    margin: 10px 10px;
    background-color: #000000;
    }
    
    .wrapper {
    width: 800px;
    background-color: #ff0000;
    }
    
    .end {
    clear: both;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="wrapper">
    
    <div class="leftbox">
    
    <h1>Heading 1</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 
    
    lorem. Fusce nec massa id erat lobortis semper. Vestibulum 
    
    dignissim orci et orci. Fusce quis tortor eu sapien gravida 
    
    pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 
    
    suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 
    
    augue. </p>
    
    </div>
    
    <div class="rightbox">
    
    <h1>Heading 1</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 
    
    lorem. Fusce nec massa id erat lobortis semper. Vestibulum 
    
    dignissim orci et orci. Fusce quis tortor eu sapien gravida 
    
    pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 
    
    suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 
    
    augue. </p>
    
    </div>
    
    <div class="end"></div>
    
    </div>
    
    
    </body>
    
    </html>
    You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help?

    P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, scosch.

    IE is a piece of junk. Don't trust it.

    You either need to float .rightbox or give it a larger left margin, e.g. 350px.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo