FN-FORUM: Div styling problem

date posted 1st February 2008 22:08

Hi all,

I am building a website in CSS and XHTML, and am having problems with the
divs inside. Trouble is, after a long day, I have had a complete brain
meltdown, and need help:

There is a big div called wrapper, inside of which I have divs for a header
(logo), left hand side (main text) and right hand side (menu, lists, etc).
There is a copyright div below this. The left-handside, right-handside and
copyright divs are contained in a div called content (to allow the
left-content and right-content divs to position properly). The CSS in use is
this:

#wrapper {
width: 730px;
border: 1px solid black;
position: relative;
left: 179px;
top: 70px;
height: 172px;
overflow: visible;
}

#header {
margin-bottom: 2%;
background-image: url(../images/header.jpg);
height: 100px;
width: 730px;
}

#left-content {
width:63%;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 25px;
margin-left: 2%;
}

#right-content {
width:32%;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
overflow: auto;
border-left: 1px solid #c4c4c4;
padding-left: 10px;
margin: 0px 5px 20px 0px;
}

.headertxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 48px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
padding-left: 10px;
}

#content {
}

#navigation {
position:absolute;
width:282px;
height:17px;
z-index:1;
left: 415px;
top: 11px;
}

.navtext {
color: #DFD7D4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

#wrapper #header #navigation a {
color: #E0D6D4;
text-decoration: none;
}

a:hover {
color: #9FBBD0;
text-decoration: underline;
}

#copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 25px;
font-size: 10px;
border-top: 1px solid #C4C4C4;
padding: 5px 0px 5px 5px;
clear: both;
}

My question is - when I add text to the left-content div, this floats down
and over the border set for the top of the copyright div. I have hunted high
and low but cannot find why - I think that I have to use something like the
overflow CSS keyword, but if so, where? Can anyone point me in the right
direction please?

Thanks,

Alex