spl1nter — Sat, 15 May 2004 23:37:39 +0000

I had already tried wrapping another div around them, but that didn't work!

If I made #content white, there wouldn't be a gap between the white and the border and I want it to be there.

I just settled for using a table to split it in two instead of divs :$

Suzanne — Fri, 14 May 2004 22:56:48 +0000

It took me a little bit of fiddling, but what's happening (I should have seen this sooner, sorry) is that the floats are popping those divs, properly, out of the div.main, out of the flow. Because they are floated.

So either wrap something around the two of them (div) or make the #content background white.

spl1nter — Fri, 14 May 2004 22:00:56 +0000

I have two more divs between them and they are both closed.

Hang on, I wonder what happens if I put the news bit underneath those columns?

Nope, that doesn't affect it

Suzanne — Fri, 14 May 2004 21:53:02 +0000

Check your HTML -- it looked to me as if .main was above and .l and .r were outside of .main?

spl1nter — Fri, 14 May 2004 21:36:17 +0000

But those areas are still within the class #content .main so the style still applies to them. I haven't over-written it either.

I did discover that if I change:

#content .main .l {
    width: 50%;
    float: left;
}

into:

#content .main .l {
    width: 50%;
}

The left column becomes white. But the right column goes beneath it (as you would expect) and it stays blue.

Suzanne — Fri, 14 May 2004 20:46:20 +0000

/* This section is for the overall look of the site */ 
html { 
    padding: 0; 
    margin: 0;
}

body { 
    font-family: Arial, sans-serif;
    font-size: small;
    color: #000;
    background: #231E2A;
    margin: 0;
    padding-top: 0;
    width: auto;
}

a:link, a:active, a:visited { 
    text-decoration: none; 
}

a:hover { 
    text-decoration: underline; 
}

/* End of overall look */

/* This is for the header section */
#header	  {
    text-align: center;
}
/* End of header section */

/* This is for the left-hand section */
#left {
    float: left;
    width: 15%;
}
/* End of left-hand section */

/* This is for the content section */
#content {
    float: right;
    width: 85%;
    border: thin dashed #6B2921;
    margin: 4px;
    padding: 4px;
}

#content .copy {
    align: center;
    text-align: center;
    color: #999;
    font-size: x-small;
    clear: both;
}

#content .copy a {
    color: #666;
}

#content .main {
    padding: 4px;
    background: #fff;
}
/* End of content section */

/* This is for the content section */
#content .main .news_box {
    border: thin dashed #999;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    width: 75%;
    padding: 4px;
}

#content .main .news_box .heading {
    background: #231E2A;
    padding: 2px;
    font-weight: bold;
    color: #fff;
}

#content .main .news_box .left_col {
    font-weight: bold;
    vertical-align: top;
    width: 10%;
}

#content .main .news_box .right_col {
    vertical-align: top;
    width: 90%;
}
					
#content .main .l {
    width: 50%;
    float: left;
}

#content .main .r {
    width: 50%;
    float: right;
}
					
#content .main .box {
    width: 80%;
    border: thin dashed #999;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
}

#content .main .box .heading1 {
    background: #231E2A;
    padding: 2px;
    font-weight: bold;
    color: #fff;
}

#content .main .box .left1 {
    font-weight: bold;
    vertical-align: top;
}

#content .main .box .right1 {
    vertical-align: top;
}
/* End of content section */

And of course it doesn't go all the way down, you only have the background of .main as white. You'd have to move the background-color: #fff; to the #content only to have the whole thing white?