align a div below another.

[Mary_Itohan]

hello guys,
am using a .net master page and trying to align a div with a nested navigation link above another div.

Such that I can add a show/hide jscript event below the navigation.

However when I add the div below, called Main_Bottom It does not appear immediately below the navigation
Please advice

many thanks

  <div id="MainMenu" >
        <div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="Main_Bottom">Text goes here</div>
       </div>

M

[ralph.m]

I think we'll need to see more code here—ll of the relevant HTML and CSS. By default, one div will always site above the one after it, so the actual code involved is really important. Preferably post a link, or at least set up a working example that demonstrates the problem and post the code here.

[Mary_Itohan]

Here is my CSS for the 1st div, the 2nd does not have any css at present.

many thanks

<div id="MainMenu" >
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="Main_Bottom">Text goes here</div>
</div>

/*---------------------------------------START HERE-------------------------- */
#MainMenu
{
width: 95%;
float:right;

}

#Main_Bottom {
border-style: solid;
}


#cssmenu {
float: left;
width: 80%;
background: #efefef;
font-size: 93%;
line-height: normal;
border-bottom: 1px solid #666;


}

#cssmenu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#cssmenu li {
display:inline;
margin:0;
padding:0;
}
#cssmenu a {
float:left;
background:url('../../images/tableftf.gif') no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#cssmenu a span {
float: left;
display: block;
background: url('../../Images/tabrightf.gif') no-repeat right top;
padding: 5px 15px 4px 6px;
color: #666;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#cssmenu a span {float:none;}
/* End IE5-Mac hack */

#cssmenu .active a span,
#cssmenu a:hover span {color:#FFFFFF;}

#cssmenu .active a,
#cssmenu a:hover {background-position: 0 -42px;}

#cssmenu .active a span,
#cssmenu a:hover span {background-position: 100% -42px;}

[ralph.m]

OK, the problem is that the first div is floated—probably because you wanted it to wrap around the list items. A better way to do that, instead of using float, is to use overflow: hidden; So change your code to this (add in the blue and remove the red):

#cssmenu {
float: left;
overflow: hidden;
width: 80%;
background: #EFEFEF;
font-size: 93%;
line-height: normal;
border-bottom: 1px solid #666;
}

[Mary_Itohan]

oh thats amazing.

many thanks Ralph

This forum should update its threads so we can vote users up.

thanks once again

[ralph.m]

You're welcome.

This forum should update its threads so we can vote users up.

Yes, that's been a hot topic of late, so it may happen next year. In the mean time, we have an end of year voting system (as you can see in my signature). If you've found people helpful during the year, feel free to nominate them for recognition.

[Mary_Itohan]

One more thing.

I added a border radius to make it curved, but it doesnt work ???

#Main_Bottom {
border-style: solid;
width: 80%;
border-top: none;
border-width: 2px;
border-color: #006699;
border:2px solid;
border-top-left-radius:2em;
}

[ralph.m]

That code works for me, assuming you want just the top left corner curved. Remember that border-radius is a new CSS3 property that doesn't work in all browsers. Older IE browsers won't understand it all, and some browsers that support it might still need vendor prefixes. E.g.

-moz-border-radius-topleft

What browser are you using?