Forum Moderators: not2easy
#container {
width: 100%;
margin: 0px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 90%;
}
#top {
clear: both;
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#leftnav {
float: left;
width: 160px;
padding-left: 1em;
margin: 7em 0 0 0;
}
#rightnav {
float: right;
width: 160px;
padding-right: 1em;
margin-top: 7em 0 0 0;
}
#content {
margin-left: 200px;
border-left: 1px dashed gray;
margin-right: 200px;
border-right: 1px dashed gray;
padding: 1em;
}
#footer {
clear: both;
margin: 0;
padding: .5em;
background-color: #ddd;
color: #333;
border-top: 1px solid gray;
}
The HTML is pretty much this:
<body>
<div id="container">
<div id="leftnav">stuff here</div>
<div id="rightnav">stuff here too</div>
<div id="top">more stuff</div>
<div id="content">content stuff</div>
<div id="footer">footer stuff</div>
<div>
</body>
My problem is the stuff that is put in the rightnav div ends up superimposed on the "top" div area dispite the margin settings(which incidently solved the same problem on the "leftnav" area).
I've been pulling my hair out on this one. Any suggestions?
#rightnav {
float: right;
width: 160px;
padding-right: 1em;
margin-top: 7em 0 0 0;
}That should be:
margin: 7em 0 0 0;
...the same as what you have for #leftnav ("which solved the problem" ;)
