CSS Forum

**Techhnyne** · 11-20-2007, 09:15 AM

hey all im new here and still fairly new to CSS

in FF why is my body_content not pushed down under the navigation, but instead is overlapping it
http://www.snowboardsummit.com/test.html

how do i fix this

**LadynRed** · 11-20-2007, 10:12 AM

You've got clearing elements where you don't need them and you're missing the one you DO need. The clearing element for your top area needs to come AFTER the closing div for #top. That will push the content area down below the navigation section. The others you don't need that I can see.

**Techhnyne** · 11-20-2007, 10:21 AM

Quote:

Originally Posted by LadynRed

You've got clearing elements where you don't need them and you're missing the one you DO need. The clearing element for your top area needs to come AFTER the closing div for #top. That will push the content area down below the navigation section. The others you don't need that I can see.

If i remove the clear after the ad banner the navigation pushes to the top.
i also added clear after the closing to top and nothing changed

thanx

**LadynRed** · 11:57 AM

Remove the embedded styles in the page, they are conflicting with the test.css file.
You don't need the display block on all those elements, a div IS a block-level element.

Ok, this works:

Quote:

Quote:

#rooftop {
/*display: block;*/
/*height: 90px;*/
margin: 0 auto;
padding: 0;
width: 900px;

}
#rooftop .logo {
float: left;
/*height: 59px;
width: 158px;*/
margin-top: 0px;
}
#rooftop .logo img {
padding: 0px 0 0 0px;
/*width: 115px;*/
border: none;
}
#rooftop .leaderboard {
float: right;
height: 100px;
width: 728px;

}
.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

.body-home {
background: url(2LMorig.jpg);
}

#rooftop, #bar, #utils, #nav, #footer {
/*display: block;*/
margin-right: auto;
margin-left: auto;
width: 900px;
}
#container {
border-top: 1px solid #fff;
background: #fff;
margin: 0 auto 60px auto;
padding: 0 10px 1px 10px;
width: 900px;
}
.clear { clear: both; height: 0; }

/* Rooftop */
#top {
/*display: block;*/
/*height: 100px;*/
margin: 6px 0 10px 0;
padding: 0;
width: 100%;
border: 1px solid orange;
}

.top_links {
font-size: .98em;
margin: 5px auto 0 auto;
text-align: right;
width: 900px;
}
#rooftop .ad_size_728x90{
background: url(aiphp.gif) no-repeat;
width: 728px;
height: 90px;
float: right;
}
#bar {
background: url(TAQ.orig.gif);
color: #CCC;
margin-top: 8px;
height: 77px;
}

/* Navigation */
.navigation{
height: 74px;
margin-bottom: 8px;
/*border: 1px solid red;*/
}

/* Main Area */
#body_content {
width: 900px;
margin-top: 12px;
height: 800px;
border: 1px solid green;
}
#widebar {
float: left;
width: 550px;
}
#sidebar {
background: #66CCFF;
float: left;
width: 300px;
}

You can take out the borders, I use them to troubleshoot so you can see where things are.

The width and height for your logo belongs in the HTML, and is not needed in the CSS.