Argh - nav menu won't get inside my DIV container

**diddy** · Jan 26th, 2010, 07:59 PM

Ok, so I'm designing this site and for some reason I can't get this standard CSS list navigation menu to sit in the white DIV container. It should be a simple fix, but I can't work it out. I'd appreaciate it if you guys had a look at it and see if you can work it out.

The page is located here: http://diddy29.110mb.com/cr2/index.html

For your quick references, the HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html lang="en" xml:lang="en">
    <head>
        <title>Home | Essential Self Solutions</title>
        <link media="all" type="text/css" href="mainstyle.css" rel="stylesheet" />
    </head>
    <body spellcheck="false">
        <div id="WhiteWrapper">
        <div id="ContentWrapper">
        <div id="Header">logo</div>
        <div id="navcontainer">
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>Feel The Fear Workshops</span></a></li>
            <li><a href="#"><span>Other Workshops</span><!--</a--></a></li>
        </ul>
        </div>
        </div>
        </div>
    </body>
</html>

And the CSS:

Code:

body {
background: #444444;
margin: 0;
padding: 0;
}

div#WhiteWrapper {
background: #ffffff;
width: 950px;
margin: 0 auto;
padding: 0 auto;
}

div#ContentWrapper {
background: #ffffff;
border: 1px solid black;
margin: 0 auto;
padding: 0px 20px 0px 20px;
width: 700px;
}

div#Header {
width: 100%;
clear: both;
margin-bottom: 30px;
}

div#navcontainer ul 
{
margin: 0 0 10px;
}

div#navcontainer ul li 
{
list-style-type: none;
display: block;
float: left;
margin: 0 10px 0 0;
}

div#navcontainer ul li a,
div#navcontainer ul li a:link,
div#navcontainer ul li a:active,
div#navcontainer ul li a:visited 
{
display: block;
width: 180px;
height: 50px;
background-image: url(nav1.png);
text-decoration: none;
}

div#navcontainer ul li a:hover 
{
display: block;
width: 180px;
height: 50px;
background-image: url(nav2.png);
text-decoration: none;
}

div#navcontainer ul li a span 
{
display: block;
padding: 20px 0;
text-align: center;
color: #ffffff;
font-family: arial;
font-size: 15px;
font-weight: normal;

}

**Web Design Forums** · Jan 26th, 2010 07:59 PM

**mlseim** · Jan 26th, 2010, 08:17 PM

What does this mean? navigation menu to sit in the white DIV container

Do you mean those 3 blue nav buttons need to go where the word "logo" is?

Or do you mean the white part should extend down below the blue buttons?

**diddy** · Jan 26th, 2010, 08:40 PM

I want the navigation menu to be inside the white area, but just below where it says "logo". That means it needs to be insite #WhiteContainer. But for some reason this is not happening.

**Dorky** · Jan 27th, 2010, 12:12 AM

using float is collapsing your div, kinda the same way absolute positioning does. remove that line and edit display to

display: inline-block;

**diddy** · Jan 27th, 2010, 12:19 AM

Thanks Dorky, that worked! I never thought you could go display: inline-block;, so thanks for that!

Thread: Argh - nav menu won't get inside my DIV container

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions