border bottom not displaying correctly

I am new to CSS so forgive me if the solution is obvious. Still i need help. I am creating a horizontal navigation menu. I have an outer wrapper that contains a list which is floated left and a div containing a search box floating right. I want to have a bottom border which spans under the entire length. This is why i have the outer wraper "nav_wrap". If i simply put border-bottom styling, it actually displays as a rule about my list and search. I have changed the border-bottom to red so you can see it easily. What am I doing wrong?

the page is located at [oooops]

Here's the code:
<style>
#mainnav
{
margin: 0;
padding: 0;
float: left;
list-style: none;
background:ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
}
.nav_home
{
margin: 0;
float:left;
padding: 3px 8px;
display: block;
color:#FFFFFF;
background-color: #000000;
}
.nav_home_select
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color:#FFFFFF;
border-right: #FFFFFF thin solid;
}

.nav_coop
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color: #CC6600;
border-right: #000 thin solid;

}
.nav_c
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color: #5D855D;
border-right: #000 thin solid;
}
.nav_other
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color:#508CD4;
border-right: #000 thin solid;
}

#search
{
padding: 1px;
margin: 0;
float: right;
}
#nav_wrap
{
border-bottom: #000000 thin solid;
}

</style>
</head>
<body>

<div id="nav_wrap">
<ul id="mainnav">
<li class="nav_home">Home</li>
<li class="nav_coop">Code Co-op</li>
<li class="nav_c">C++ Resources</li>
<li class="nav_other">Freeware</li>
<li class="nav_other">Science</li>
<li class="nav_other">Scoop</li>
<li class="nav_search"></li>
</ul>
<div id="search">
<form name='Search' action='Query.asp' method='get'>
<input type='text' name='InputString' size='12' maxlength='50' value='Search'>
<input type='submit' name='Action' value='GO'></form>
</div>
</div>

[edited by: SuzyUK at 9:55 pm (utc) on Mar. 3, 2006]
[edit reason] ooops sorry no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

border bottom not displaying correctly

relisoft

relisoft

relisoft

jessejump

relisoft

doodlebee

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week