Welcome to WebmasterWorld Guest from 54.204.162.36

Forum Moderators: not2easy

strange css problem

   
7:39 am on Jan 2, 2007 (gmt 0)

5+ Year Member



I'm having trouble with the code below:

#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?

5:37 pm on Jan 2, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Hi ddregallo, you have an error in your CSS which is killing your #rightnav's top margin....

#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" ;)

6:40 pm on Jan 2, 2007 (gmt 0)

5+ Year Member



Oooops! I can't beleive I missed that. Thanks for finding my bone-head mistake penders. It works fine now!
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month