Div Border [Archive] - Lissa Explains it All: Web Design Forums

anime4eva

08-17-2006, 07:53 AM

Hey!

I need some help with some divs. I used a container div to center align my other divs. Then I put two other divs over the container to contain the container with borders on them to act as a border for the layout. The problem is the two divs that are borders only cover up to the top div, why does it do that? I didn't specify a height and I tried putting "clear: both;" on the css and it didn't do anything. The problem is occuring in Firefox, it works great in IE. So does anyone know the problem.

The HTML is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link href="style2.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

<body style="cursor: crosshair;">
<center>
<div id="container2">

<div id="container3">

<div id="container">

<div id="top">
</div>

<div id="content">
<h1>test!</h1>
<h2>TEST!</h2>
<p>test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test
<a href="test.html">TEST</a></p>
<p>test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
scrolls!</p>
</div>

<div id="nav1">
</div>

<div id="nav2">
<img src="layout5navbottom.png" usemap="#nav" width="294px" height="214px">
<map name="nav">
<area shape="rect" coords="3,3,28,166" href="blog.php" alt=".blog">
<area shape="rect" coords="46,12,110,36" href="site.php" alt=".site">
<area shape="rect" coords="48,49,98,72" href="me.php" alt=".me">
<area shape="rect" coords="49,90,106,119" href="you.php" alt=".you">
<area shape="rect" coords="43,132,118,158" href="ask.php" alt=".ask">
<area shape="rect" coords="143,12,230,35" href="amv.php" alt=".amv's">
<area shape="rect" coords="144,48,198,70" href="portfolio.php" alt=".art">
<area shape="rect" coords="144,89,226,113" href="radioblog.php" alt=".radio">
<area shape="rect" coords="144,131,213,161" href="sign.php" alt=".sign">
<area shape="rect" coords="266,3,289,189" href="exit.php" alt=".leave">
<area shape="rect" coords="4,173,68,192" href="index.php" alt=".index">
</map>
</div>

<div id="nav3">
<h1>test!</h1>
<h2>TEST!</h2>
<p>test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test
<a href="test.html">TEST</a></p>
<p>test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
test! Test! TEST! tEsT!<br><br>
scrolls!</p>
</div>

</div>

</div>

</div>
</center>
</body>
</html>

The css(for the divs only) is:

/* THIS SECTION CONTROLS THE LAYOUT FORMAT */

body {

background: #FDFDFA;

color: #822E3A;

font-family: Times New Roman;

font-size: 12px;
text-align: justify;

line-height: 14px;
margin: 0 auto 0 auto;

}

div#stuff{
width: 1076px;
text-align: center;
}

div#container{
width: 722px;
text-align: center;
}

div#top {
width: 722px;
height: 626px;
background: url(layout5top2.png) no-repeat;
}

div#nav1 {
width: 294px;
height: 461px;
background: url(layout5nav.png) no-repeat;
float: left;
}

div#nav2 {
width: 294px;
height: 214px;
background: url(layout5navbottom.png) no-repeat;
float: left;
}

div#nav3 {
width: 284px;
background: #FDFDFA;
float: left;
padding: 5px;
margin-top: -20px;
}

div#content {
width: 412px;
height: 1400px;
border-top: 0px;
border-bottom: 0px;
border-left: 3px solid #822E3A;
border-right: 3px solid #822E3A;
padding: 5px;
float: left;
margin-top: -50px;
background: #FDFDFA;
}

div#container2{
width: 742px;
border: 20px solid #822E3A;
margin-top: 20px;
text-align: center;
}

div#container3{
width: 722px;
text-align: center;
border: 10px solid #110707;
}

Thanks for the help!