Height of Content in Left Div Pushes Down <DT> in Right Div

I don't understand why this code works in IE7, but not in Firefox, Opera & Safari. The definition terms in the right div drop down to the end of the data in the left div wherever that happens to fall in relation to the text in the right div. The definition data are unaffected. If the definition term would display below the end of the links in the left div, it lines up properly. If I remove the left div completely or shorten the number of items so that they do not drop below the first definition term, all is well.

<!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>Why Doesn't This Work in Mozilla?</title>
<style type="text/css">
div.content {
border-left: 10px green solid;
width: 100%;
height: 100%;
}
div.main {
border-left: 10px yellow solid;
margin-left: 200px;
height: 100%;
text-align: left;
}
div.links {
float: left;
background-color: red;
width: 200px;
font-size: 14px;
}
div.linkbar {
background-color: blue;
color: white;
width: 100%;
}
dt{
float:left;
clear:left;
width:150px;
text-align:right;
}
dd {
margin:0 0 0 160px;
padding: 0 0 10px 0;
}
</style>
</head>
<body>
<div class="content">
<div class="links">
<div class="linkbar">
A Buncha Links </div>
A Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
Another Link<br />
</div>
<div class="main">
<h2>Some Definitions</h2>
<dl>
<dt>First</dt>
<dd>FIRST DEFINITION sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
</dd>
<dt>Second</dt>
<dd>SECOND DEFINITION sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
sometext sometext sometext sometextsometext sometext sometext sometext sometext
</dd>
<dt>Third</dt>
<dd>THIRD DEFINITION sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext sometext
sometext sometext sometext sometext sometext
</dd>
</dl>
</div>
</div>
</body>
</html>

Can anyone explain why this is happening? Better yet, is there a solution to the problem or a better way of achieving this layout? Thanks.

Height of Content in Left Div Pushes Down <DT> in Right Div

Works great in IE7 but not in Mozilla browsers

jdkuehne

jdkuehne

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week