divs not stacking properly

I have been trying to make this work for the past two days with no joy. Can anyone tell me what the problem is? In IE, the right column div sits along side the left column with its content divs nested inside. In Firefox, et.al., the right div extends to the left edge of the browser window and the link3 appears below the other two. The IE presentation is the desired one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>debug me please</title>
<style type="text/css">
body {
padding: 0 0 0 0;
border-width: 0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
margin-left: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
text-decoration: none;
border-left-width: 0px;
border-top-width: 0px;
}
table.one {
background-color: violet;
width: 100%;
table-layout: fixed;
}
td.one {
height: 50px;
}
div.container {
border-top: 0px;
border-left: 1px #006 solid;
border-right: 0px;
border-bottom: 0px;
width: 100%;
}
div.left-column {
float: left;
background-color: yellow;
width: 200px;
font-size: 11px;
text-align: left;
}
div.left-header {
padding: 0px;
margin: 0px;
background-color: navy;
color: white;
width: 100%;
height: 15px;
text-align: center;
line-height: 15px;
}
div.right-column {
background-color: red;
border-right: 20px lime solid;
border-left: 20px lime solid;
height: 200px;
}
div.linkheader {
width:33%;
height: 22px;
float:left;
}
div.greenbar {
height: 25px;
background-color:green;
width:100%;
}
div.bottomlink {
clear:both;
}
table.bottomlink {
padding: 0px;
margin: 0px;
background-color: white;
width: 100%;
border: 1px #006 solid;
font-size: 12px;
table-layout: fixed;
text-decoration: none;
clear: both;
}
td.bottomlink {
padding: 0px;
margin: 0px;
border: 1px solid #006;
height: 22px;
font-size: 11px;
color: #000000;
text-align: center;
}
div.copy {
background-color:aqua;
color: black;
font-size:x-small;
text-align: center;
vertical-align: middle;
clear: both;
}
</style>
</head>
<body>
<table class="one">
<tr>
<td class="one"></td>
</tr>
</table>
<div class="container">
<div class="left-column">
<div class="left-header">Some Content</div>
Some content here
<br />
<br />
blahblahblahblah<br />
blahblahblahblah<br />
etc.
<br />
<br />
End of Content</div>
<div class="right-column">
<div class="linkheader">Link1</div>
<div class="linkheader">Link2</div>
<div class="linkheader">Link3</div>
<div class="greenbar"></div>
</div></div>
<div class="bottomlink">
<table class="bottomlink">
<tr>
<td class="bottomlink">LinkA</td>
<td class="bottomlink">LinkB</td>
<td class="bottomlink">LinkC</td>
<td class="bottomlink">LinkD</td>
<td class="bottomlink">LinkE</td>
</tr>
</table></div>
<div class="copy">
© Copyright Whoever Can Tell Me What I'm Doing Wrong ;)</div>
</body>
</html>

Any hint is appreciated. Thanks.

divs not stacking properly

works in IE, not Mozilla

jdkuehne

appi2

jdkuehne

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week