Bit of div/css help please
I'm doing my very first div / css layout and I've come to a bit of a problem.
http://i59.photobucket.com/albums/g2...tfish/oops.png
How do I get the 'home' div under the 'navigation' div.
Heres the source code to help you
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyTropica - SNAPPY SLOGAN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-image: url(images/layout/backtest.png);
text-align: center;
margin: 0px;
}
body, td, tr, table, th, div, span {
font-family: Arial;
font-size: 11px;
color: #000000;
font-weight: normal;
}
#top {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
font-weight: bold;
height: 17px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
text-align: left;
border-bottom: 1px dotted #A6A6A6;
}
#bottom {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
font-weight: bold;
height: 17px;
width: 98%;
padding-left: 1%;
padding-right: 1%;
padding-top: 3px;
text-align: left;
border-top: 1px dotted #A6A6A6;
position: absolute;
bottom: 0px;
left: 0px;
float: left;
}
.spacer {
height: 10px;
}
#main {
width: 800px;
margin-top: auto;
text-align: center;
}
#navtop {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
width: 195px;
padding-right: 5px;
font-weight: bold;
padding-top: 3px;
border: 1px dotted #A6A6A6;
height: 17px;
float: left;
}
#contenttop {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
width: 545px;
padding-right: 5px;
font-weight: bold;
padding-top: 3px;
border: 1px dotted #A6A6A6;
height: 17px;
float: right;
}
#advert {
background-image: url(images/layout/grey.png);
width: 400px;
border: 1px dotted #A6A6A6;
height: 125px;
}
.navbutton {
background-image: url(images/layout/grey.png);
width: 195px;
padding-right: 5px;
font-weight: bold;
padding-top: 3px;
border-left: 1px dotted #A6A6A6;
border-right: 1px dotted #A6A6A6;
border-bottom: 1px dotted #A6A6A6;
height: 17px;
float: left;
margin: auto;
}
-->
</style>
</head>
<body>
<div id="top">Hello and welcome to MyTropica.net</div>
<div class="spacer"></div>
<center>
<div id="main">
<center>
<div id="advert">Some type of rotating advert here</div>
</center>
<div class="spacer"></div>
<div id="navtop">Navigation</div>
<div class="navbutton">Home</div>
<div id="contenttop">Main Content</div>
<div id="bottom">Copyright MyTropica 2008+</div>
</div>
</center>
</body>
</html>
