Welcome to WebmasterWorld Guest from 54.198.100.141

Forum Moderators: not2easy

Message Too Old, No Replies

strange css problem

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

New User

5+ Year Member

joined:Jan 2, 2007
posts:17
votes: 0


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)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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)

New User

5+ Year Member

joined:Jan 2, 2007
posts:17
votes: 0


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