Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: not2easy

Message Too Old, No Replies

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

Works great in IE7 but not in Mozilla browsers

     
7:58 pm on Aug 29, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


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.
8:39 pm on Aug 29, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Problem solved. It was the dt{clear:left} that was causing the unwanted behavior. Removing this causes proper behavior in both browsers.

This is one of the problems with developing a site in MS Expression Web (and Front Page before it). What appears to work well in the designer does not always look good live. I guess the lesson is preview it after every step.