Forum Moderators: not2easy
I have in my stylesheet: html, body, wrapper, left column and right column all set to height: 100%.
I've currently got the bg image of the right column in the wrapper div (aligned right).
What this produces visually is the two columns are the same height as the screen but for some reason the right content overflows. The content requires vertical scrolling in order to view it all. When I scroll down below the initial screen view the background images for both columns cuts off at exactly the height of the screen.
When I put html as min-height: 100% this happens:
When the right column content goes further down the page than the left column content (the left column is the side that varies from page to page) the left column background does not stretch to the bottom of the screen.
Sorry if this is a bit unclear - I'm very tired.
Here is my CSS:
html { height: 100%; }
body {
margin: 0px;
padding: 0px;
background-image: url(images/autumn/body_bg.gif);
text-align: center;
height: 100%;
}
#wrapper {
margin: 0px auto;
padding: 0px;
width: 800px;
background-color: #CCCCFF;
background-image: url(images/autumn/right_col_bg.gif);
background-repeat: repeat-y;
background-position: right;
height: 100%;
}
#content-area {
margin: 0px;
padding: 0px;
width: 552px;
text-align: center;
float: left;
background-image: url(images/autumn/content_bg_slice.gif);
background-repeat: repeat-y;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333366;
min-height: 100%;
}
#right-col {
background-image: url(images/autumn/right_col_bg.gif);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
width: 248px;
text-align: center;
background-color: #333366;
color: #CCCCFF;
float: left;
height: 100%;
}
I also have a clear: both under the two columns in an hr.
My html is standard:
<body><div id="wrapper">
<div id="content-area">
</div>
<div id="right-col>
</div>
</body>
I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
What's going on? - there's nothing on the net to help me that i can find. How do I solve this?
Make an image that's 800px wide (as wide as your #wrapper div) - make it 1 pixel high. Make the first section 552pixels wide (as wide as #content-area), and the remainder will be for the right column area. (if your background images are bigger than 1 pixel high - make it bigger - doesn't reayy matter what size, as long as you get what you want, eh?)
Then set this image as your #wrapper background. Remove all references to 100% - it's not necessary. set your content div to float:left, and your right column to float:right. Then have an hr tag (we'll call it clear"> as such:
hr.clear {
clear:both;
display:block;
visibility:hidden;
width:800px;
margin:0;
padding:0;}
Then your html should look as such:
<body>
<div id="wrapper">
<div id="content-area">
</div>
<div id="right-col>
</div>
<hr class="clear">
</body>
I think the reason I didn't do it on this one is that my right column bg needs to be a jpg cos it is a gradient.
But as it happens I'm redesigning the site again now and getting stuck - mainly with colours, but there you go.
Your method for the clear:both seems a bit neater than mine though so I might use that instead. No negative margin.
Thanks doodlebee.
