PDA

View Full Version : div's not lining up

jyoun79
06-01-2007, 07:16 PM
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?
_Aerospace_Eng_
06-01-2007, 07:36 PM
Lack of doctype? Try this. Only thing I changed/added was the code in red
<!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>
jyoun79
06-01-2007, 07:38 PM
No, I just excluded that when I copy/pasted.
_Aerospace_Eng_
06-01-2007, 07:39 PM
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
is incorrect. This is correct
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
jyoun79
06-01-2007, 08:56 PM
you were absolutely right, thanks :)