Small CSS (div) problem, i think..

Could anyone experienced with css layouts and using <div id= tags take a look at this,

image is attached for better explanation

I have a menu in the navigation that drops down using css and js, but whenever it drops down to display its sub links it also drags the content box down with it. a screenshot is attached to show you what i mean.

'm guessing the #content is inside the navigation divs somewhere but i cant seem to work it out. here is the code for that page and the required css..

<div id="wrapper">
<br />
<div id="date">
<script language="JavaScript" type="text/javascript"><!--
document.writeln('&nbsp;' +dayStr+ ''); // --></script>
</div>
<div id="map">Home</div>
<div id="navigation">
<div class="buttonscontainer">
<div class="buttons">
<!--#include virtual="includes/navigation.ssi" -->
</div>
</div>
</div>
<div class="body">
<div id="content">
<p>content goes here.........</p>
</div>
<div id="footer"><!--#include virtual="includes/footer.ssi" --></div>
</div>
</div>

here is the full css for reference

/* Main website styling */
body {
margin-top: 5px;
margin-bottom: 5px;
font: 12px Verdana;
color: #333333;
background: #e7e6e6 url('images/background.jpg') no-repeat fixed right;
}

#wrapper {
background: #FFFFFF;
height: 100%;
width: 767px;
padding: 0;
text-align: left;
border: 1px solid #cccccc;
margin-left: auto;
margin-right: auto;
}

#header {
text-align: right;
height: 100px;
}

#navigation {
height:100%;
}

#content {
width: 580px;
padding: 5px;
text-align: left;
position: relative; left: 200px; top: -300px;
}

#footer {
background: #FFFFFF;
width: 757px;
border: 1px solid #cccccc;
position: relative; top: 60px; left: -1px;
padding: 5px;
font-size: 10px;
color: #b0b0b0;
text-align: center;
}

#date {
width: 165px;
height: 16px;
border-top: 3px solid #fdc3c3;
font: bold 10px Verdana;
text-indent: 15px;
background-color: #fdc3c3;
color: #FFFFFF;
}

#map {
width: 590px;
height: 16px;
border-top: 3px solid #cccccc;
font: 10px Verdana;
text-indent: 10px;
background-color: #cccccc;
color: #333333;
position: relative; top: -19px; left: 177px;
}

/* Buttons & links for main navigation */
.buttonscontainer {
width: 164px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
border-left: 0px;
border-right: 1px solid #cccccc;
}

.buttons a {
color: #333333;
background-color: #ebebeb;
padding: 4px;
padding-left: 3px;
display: block;
font: 12px Verdana;
text-decoration: none;
text-indent: 5px;
border-bottom: 1px solid #FFFFFF;
}

.buttons a:hover {
BACKGROUND-COLOR: #dddcdc;
COLOR: #000000;
TEXT-DECORATION: none;
border-right: 2px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.buttons a:active {
BACKGROUND-COLOR: #333333;
TEXT-DECORATION: none;
}

.buttons a:visited {
COLOR: #333333;
}

/* Links for the content */
.body a:link {
text-decoration: underline;
color: #970606;
}

.body a:visited {
text-decoration: underline;
color: #970606;
}

.body a:hover {
text-decoration: none;
COLOR: #cccccc;
}

I think it is to do with your positioning, basically when your sub menu appears the browser will automatically place the next div "body" horizontally next to it.

Try placing all of your menu divs (navigation, buttonscontainer and buttons) inside an encapsaulating div called say menu. This will/should place your next div (body) always horizontally next to it.

Give it a go and let me know. I had a similar problem. You can use positioning such absolute, but then you don't get the flexibility that you might want.

I am reasonably new to the CSS game myself, so I might be talking out of my culo, but its worth a try.

thanks for your reply, it didnt make any difference tho :(

Please post a live link.

There is no telling what your server-side includes are holding.