Background colour doesn't go all the way?
http://www.excitingprospects.co.uk/greenockhockeyclub/
Take a look at the above site and you'll notice that the white background doesn't seem to go all the way down. It's linking to two CSS sheets (this is for later. Also, ignore the fact that I haven't made a print style sheet yet )
This is the main style sheet (for the whole site...when it gets done ):
/* This section is for the overall look of the site */
html {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
body {
font-family: Arial, sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #000000;
background: #231E2A;
margin: 0px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding-top: 0px;
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: #999999;
font-size: x-small;
clear: both;
}
#content .copy a {
color: #666666;
}
#content .main {
padding: 4px;
background: #FFFFFF;
}
/* End of content section */And this is the page's own style sheet:
/* This is for the content section */
#content .main .news_box {
border: thin dashed #999999;
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: #FFFFFF;
}
#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 #999999;
padding: 4px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
#content .main .box .heading1 {
background: #231E2A;
padding: 2px;
font-weight: bold;
color: #FFFFFF;
}
#content .main .box .left1 {
font-weight: bold;
vertical-align: top;
}
#content .main .box .right1 {
vertical-align: top;
}
/* End of content section */
Suzanne posted this at 20:46 — 14th May 2004.
She has: 5,507 posts
Joined: Feb 2000
/* 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?
spl1nter posted this at 21:36 — 14th May 2004.
They have: 15 posts
Joined: Mar 2004
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 posted this at 21:53 — 14th May 2004.
She has: 5,507 posts
Joined: Feb 2000
Check your HTML -- it looked to me as if .main was above and .l and .r were outside of .main?
spl1nter posted this at 22:00 — 14th May 2004.
They have: 15 posts
Joined: Mar 2004
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 posted this at 22:56 — 14th May 2004.
She has: 5,507 posts
Joined: Feb 2000
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 posted this at 23:37 — 15th May 2004.
They have: 15 posts
Joined: Mar 2004
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 :$
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.