Hi guys,
I'm having a really irritating problem here that I hope you can help with! I'm using CSS to layout a website - but I'm having a problem where the main body is split into two columns, "leftbody" and "rightbody". I have it laid out so the footer (below these two) moves down as rightbody expands downwards. The problem is that rightbody has decided to lie slightly below leftbody, and whenever I add linebreaks or content to the left half, the right half moves down with it, never sitting flush as it should be. Why is this? Here's the CSS:
/* Layout */
body {
padding: 0px;
margin: 0px;
}
#topnav {
padding: 0px;
top: 0px;
left: 0px;
width:128px;
height:50px;
}
#topnavright {
height: 50px;
position: absolute;
padding: 0px;
top: 0px;
left: 470px;
}
.greyline {
position: absolute;
padding: 0px;
top: 50px;
background-color: #666666;
width: 100%;
height: 2px;
}
#headerimage {
position: absolute;
padding: 0px;
top: 53px;
width: 770px;
height: 180px;
}
#navsystem {
position: absolute;
padding: 0px;
top: 230px;
width: 770px;
height: 20px;
background-color: #1D2A5F;
}
#rightbody {
position: relative;
background-color: #DDDDDD;
width: 570px;
margin-left: 200px;
margin-top: 0px;
}
#leftbody {
position: relative;
padding: 20px;
background-color: #EEEEEE;
padding: 0px;
top: 200px;
width: 200px;
margin-top: 75px;
}
#navsystem2 {
clear: both;
padding: 0px;
width: 770px;
height: 15px;
}
#footer {
clear: both;
padding: 0px;
width: 770px;
background-color: #FFFFFF;
}
Any help would be greatly appreciated! I had plenty of hair when I started this - beginning to worry that won't last long!  |
