Layout Problem

When I first wrote this page I used a table for layout(I was new) and have recently noticed that because of this my page would not display correctly in safari browsers. I am trying to replace this table layout with a div layout(which I have done a thousand times before) but something is amiss. My page consists of a header, footer, and three columns. The third column is having some positioning issues. It wants to display at the very bottom of the page for some reason, under the other two but above the footer, and the second column displays with a small amount of space between it and the border of the wrapper. Here is the simplified code. Save and load to see a colorful illustration of the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example Page</title>
<style type="text/css">
#wrap_index {
border:5px dotted black;
}

#col1 {
background-color:#36F;
width:200px;
height:300px;
float:left;
}

#col2 {
background-color:#6C6;
margin:0px 210px 0px 200px;
height:200px;
}

#col3 {
background-color:#C06;
width:210px;
float:right;
}

#footer {
background-color:#CCC;
clear:both;
}
</style>

<body>

<div><h1>Example Page</h1></div>

<div id="wrap_index">
<div id="col1">
<h4>Column 1</h4>
</div>

<div id="col2">
<h4>Column 2</h4>
</div>

<div id="col3">
<h4>Column 3</h4>
</div>
</div>

<div id="footer">
<h4>Footer</h4>
</div>
</body>
</html>

Since the two outer columns are floated to the left and right, in my experience, they should be ignored by the wrapper and its content and always fall right at the top of their containing box element. Maybe I'm over thinking the problem. Anyone have a solution?

Layout Problem

Third column in div layout displays at bottom of screen. How do I fix it?

Baxter30

swa66

tangor

Baxter30

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week