EDIT: I found the exact same tutorial on this site. I'm going to follow that one and see where I went wrong. Thanks.
Ok, I followed this
tutorial that I found on the net.
I'm trying it out for myself. I colored the boxes with random colors and everything looked cool in the beginning. But when I started adding text and more styling, everything fell apart in FF. It looks decent in IE, though. I thought eveything was basically the same between the source code of the tutorial and mine - except I left out the float: right menu box. That was getting on my nerves with overlapping.
I uploaded it, if you want to see it:
here (Sorry for the blinding colors.)
In FF the Header Div (purple) seems to be floating, while in IE its flush to the top. And then I want the Menu right under that.
In FF, the Foot DIV (green) is hanging out of the Containter DIV(red). And I want that to be flush to the bottom of the container. I actually made the Contents DIV(aqua) longer by playing around with all of the heights, so that it'll push it down to the bottom. Butis there a better way to do it?
I think that's about it.
Code is here:
CODE
<html>
<head>
<title>TITLE</title>
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #000;
background-color: #D6D6D6;
}
#container{
margin: 1em auto;
width: 650px;
height:510px;
text-align: left;
background-color: red;
border: 1px solid black;
}
#header { background-color: fuchsia; }
#mainnav { background-color: green;}
#mainnav ul {
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
border-left: 1px solid #C4C769;
}
#mainnav li {
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
}
#mainnav li a {
text-decoration: none;
color: #272900;
}
#mainnav li a:hover {
text-decoration: none;
color: #fff;
background-color: #272900;
}
/*
#menu{
float: right;
width: 180px;
background-color: yellow;
} styles the container */
#contents{
margin-right: 40px;
margin-left: 40px;
margin-top: 20px;
margin-bottom: 20px;
background-color: aqua;
height: 380px;
padding: 10x;
}
#footer{
clear: both;
height: 20px;
background-color: lime;
}
</style>
<div id="container">
<div id="header"><h1>Welcome this Site!</h1></div>
<div id="mainnav">
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
<li><a href="#">Section 4</a></li>
<li><a href="#">Section 5</a></li>
<li><a href="#">Section 6</a></li>
<li><a href="#">Section 7</a></li>
</ul>
</div>
<div id="contents">blah blah</div>
<div id="footer">(c)EMB, Inc 2008 and beyond</div>
</div>
| 