Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div's not lining up

    Hi, I'm trying to make a box with 2 columns, and 2 rows in the left column. When I open it with IE, the right column "jumps" down BELOW the left column, rather than on the same row.

    Here's my code:
    <HTML>
    <HEAD>

    <style type="text/css">
    .mainBox {
    width:400px;
    height: 150px;
    margin-right:auto;
    margin-left:auto;
    margin-top:10px;
    padding:0px;
    text-align:left;
    overflow : auto;
    }
    .rowBox {
    width: 400px;
    height: 150px;
    padding:0px;
    }
    .leftRow {
    width:300px;
    height: 150px;
    padding:0px;
    float:left;
    background:white;
    }

    .leftTop {
    width:300px;
    height: 100px;
    padding:0px;
    float:left;
    background:gray;
    }

    .leftBottom {
    width:300px;
    height: 50px;
    padding:0px;
    float:left;
    background:yellow;
    }

    .rightRow {
    width:100px;
    height: 150px;
    padding:0px;
    float:left;
    background:green;
    }
    </style>

    </HEAD>

    <BODY>
    <div class="mainBox">
    <div class="rowBox">
    <div class="leftRow">
    <div class="leftTop">top box</div>
    <div class="leftBottom">bottom box</div>
    </div>
    <div class="rightRow">
    <img src="" width="100" height="50" align="right"/>
    </div>
    </div>
    </div>
    </BODY>
    </HTML>

    Any hints?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Lack of doctype? Try this. Only thing I changed/added was the code in red
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    .mainBox {
    width:400px;
    height: 150px;
    margin-right:auto;
    margin-left:auto;
    margin-top:10px;
    padding:0px;
    text-align:left;
    overflow : auto;
    }
    
    .rowBox {
    width: 400px;
    height: 150px;
    padding:0px;
    }
    
    .leftRow {
    width:300px;
    height: 150px;
    padding:0px;
    float:left;
    background:white;
    }
    
    .leftTop {
    width:300px;
    height: 100px;
    padding:0px;
    float:left;
    background:gray;
    }
    
    .leftBottom {
    width:300px;
    height: 50px;
    padding:0px;
    float:left;
    background:yellow;
    }
    
    .rightRow {
    width:100px;
    height: 150px;
    padding:0px;
    float:left;
    background:green;
    }
    </style>
    </head>
    <body>
    <div class="mainBox">
    	<div class="rowBox">
    		<div class="leftRow">
    			<div class="leftTop">top box</div>
    			<div class="leftBottom">bottom box</div>
    		</div>
    		<div class="rightRow"> <img src="" width="100" height="50" align="right"></div>
    	</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I just excluded that when I copy/pasted.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Some how I don't think you were using the proper one. I added a full doctype and the page displays correctly in IE6+ and Firefox. Something like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    is incorrect. This is correct
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you were absolutely right, thanks


  •  

    Posting Permissions

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