0
I am desiging a site, which has a menu which is floated. I want the design to have a floated menu, however it is causing me grief.
When here is no menu (see link), everything is layed out fine.
http://www.monsterserve.net/nomenu.htm
When i incldue the floating menu, for some reason there is additional height added in the spacer div (again see link)
http://www.monsterse...et/withmenu.htm
Cant work out for the life of me why it should be adding height, it does it in ie6 and firefox
Also, how would i go about floating the submenu to the right, and adding a little space between the submenu bottom and the paragraph?
Code for site can be got from links, or from include below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p{
margin: 0px;
padding:0px;
text-align: justify;
}
#submenu
{
width:200px;
height:200px;
border: 1px solid black;
}
body
{
margin:0px;
padding:0px;
font-family: Tahoma, Arial,sans-serif;
font-size: 11px;
}
#container
{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; /* offset 10px from page top */
text-align:left;
border: 1px solid black;
}
#menu
{
position:relative;
width:275px;
height:20px;
border: 1px solid black;
left: 76px;
top: 44px;
}
#left
{
float:left;
width:400px;
margin: 0px;
}
#right
{
margin-left: 400px;
padding: 10px;
border-left: 1px solid black;
}
#spacer
{
height:30px;
border-bottom: 1px solid black;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="menu">menu</div>
<div id="spacer">spacer</div>
<div id="left">picture</div>
<div id="right">
<div id="submenu">submenu</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.
Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris
vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor
</p>
</div> <!-- end right div -->
</div> <!-- end container div -->
</body>
</html>
Many thanks in advance, hopefully someone can help me before i go insane!!
Cheers,
Chris
