homepage Welcome to WebmasterWorld Guest from 54.204.231.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
strange css problem
ddregallo




msg:3205493
 7:39 am on Jan 2, 2007 (gmt 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?

 

penders




msg:3205985
 5:37 pm on Jan 2, 2007 (gmt 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" ;)

ddregallo




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved