I’m a complete amateur with a book trying to put a small website together and my layout’s gone wrong. I’ve got 3 floating elements effectively forming 3 columns which all seem to fit together fine except that there is a gap between the tops and the horizontal navigation bar. It is the same in both Firefox and IE and I would like to get rid of it. I’ve put most of the layout code here because I don’t know which bit is wrong and any help would be much appreciated. I can’t post a link to the site to look at because the forum won’t let me!
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center; background:navy}
p{margin:10px 20px 20px}
div#header h1{height:120px;line-height:80px;margin:0;
padding-left:10px;
background: navy url(pictures/header10.jpg) center;
border-bottom: 1px solid navy;
border-top: 3px solid navy;
color: white;}
div#container{text-align:left;}
div#container{width:1000px;margin:0 auto}
div#content p{line-height:1.4}
div#content{background:white; }
div#content{margin-right: 400px; height: 640px}
div#middle{background:white}
div#middle{float:left;width:100px;margin-left:-400px; }
div#extra{background:white}
div#extra{float:left;width:300px;margin-left:-300px; }
div#footer{background: #E7E7E7;color: black; border-bottom: 1px solid navy;
}
div#footer p{margin:0;padding:5px 10px}
#extra a {
text-transform: uppercase;
}
div#wrapper{float:left;width:100%; background: white}
div#footer{clear:left;width:100%}
#nav li {
float: left;
width: 142.6px;
list-style-type: none;
}
#nav a {
color: #000;
font-size: 1em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid navy;
padding: 5px 10px 5px 10px;
display: block;
background: #E7E7E7;
border-left: none;
}
#nav a:hover {
color: white;
background-color: red;
}
#nav a:active {
color: white;
background-color: aqua;
}
ul#nav {
margin-left: 0px;
margin-top: 0px;
padding: 0;
list-style: none;
border-left: 1px solid navy;
float: left;
}