div covering div

esthera

01-31-2007, 02:52 PM

I have the following html

the div bottom is supposed to be under the div middle but in firefox it appears over it.

why?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#middle{
width:779px;
margin-top:4px;
}
#midleft{
float:left;
width:618px;
display-block;
}
#midright{
float:right;
width:163px;
margin-right:10px;
display-block;
}
.boxright{
padding:0px;
margin:0px;
width:162px;
border: 5px solid #969593;
height:162px;
display:block;

}
.bottomad{
width:780px;
height:96px;
background-image: url(images/bottomads.gif);
text-align:center;
display:block;

}

</style>
</head>

<body>
<div id=middle>
<div id=midleft></div>

<div id=midright>
<div class=boxright></div>
<div class=boxright></div>
<div class=boxright></div>
<div class=boxright></div>
</div>
</div>
<div class=bottomad></div>
</body>
</html>

timgolding

01-31-2007, 03:14 PM

All you need to do is clear the divs. Try this!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#middle
{
width:779px;
margin-top:4px;
clear:both; /* we clear the div to prevent other divs starting next to this*/
float:left;
}

#midleft
{
float:left;
width:618px;
/*display-block; no such property did you mean display:block;?*/
}

#midright
{
float:right;
width:163px;
margin-right:10px;
}

.boxright
{
padding:0px;
margin:0px;
width:162px;
border: 5px solid #969593;
height:162px;
/* display:block; divs are block elements so this is not needed */

}

.bottomad
{
width:780px;
height:96px;
background-image: url(images/bottomads.gif);
text-align:center;
clear:both; /* we clear the div to prevent other divs starting next to this*/
float:left;

}

</style>
</head>

<body>
<div id=middle>
<div id=midleft></div>

<div id=midright>
<div class=boxright></div>
<div class=boxright></div>
<div class=boxright></div>
<div class=boxright></div>
</div>
</div>
<div class=bottomad></div>
</body>
</html>

gl

_Aerospace_Eng_

01-31-2007, 05:25 PM

Why are you floating the bottom ad? No need to float it. Also why do you insist on using invalid doctypes? Every test page I've seen you post has a partial doctype and you always seem to have problems with it. Start using a VALID FULL doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Arbitrator

02-01-2007, 12:01 AM

Also why do you insist on using invalid doctypes?The system identifier (URL) is optional, so the declaration is not actually invalid.

However, leaving out the URL can trigger quirks (http://hsivonen.iki.fi/doctype/) mode in various browsers, so it’s best to include it. If you were to use, for example, the below HTML 4.01 Strict declaration without the system identifier, current browsers would render the page in standards‐compliance mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Of course, esthera is using the Transitional declaration, presumably transitioning his code from HTML 3.2, so his document ends up getting the quirks mode treatment.

_Aerospace_Eng_

02-01-2007, 12:31 AM

Partial doctype is what I should have said.