Log in

View Full Version : Question about backgrounds


WebSardine
09-01-2006, 10:05 PM
New here...go easy.

I am trying to find a solution to a problem I often run into. I am trying to figure out how to set a background for a page and then place a centered column on the page that runs the full length of the page no matter how much content I have in the middle column. I seem to run into this problem a lot and always have to find a work around. I want to solve this issue once and for all. Can you help?

Here's is a conceptual example of it not working:

CSS file:

body {
margin:0;
padding:0;
background:#003399;
}

* {margin:0px; padding:0px;}

#content {
background:#FF0000;
width:800px;
margin:0 auto;
}

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="css_example.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="content">
<p>Here is a little content</p>
</div>
</body>
</html>

I have also hosted the example so it is easy for you to take a look at it.
http://www.soundparanoia.com/slop/css_example.html

In the example, I want the red to extend the length of the page no matter what the content is. I know the example is trivial, but I think it's probably the easiest one to use for exemplifying this issue.

Thanks for the help!
mburt
09-01-2006, 10:14 PM
Set the height of the content to 100%
WebSardine
09-01-2006, 10:21 PM
Set the height of the content to 100%
I always thought that's the way to do it, but it doesn't do a darn thing. It makes complete sense, but does not seem to make any change.
NXArmada
09-01-2006, 10:28 PM
This will work the way you want:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style>
html
{
height: 100%;
}

body
{
height: 100%;
margin:0;
padding:0;
background:#003399;
}

* {margin:0px; padding:0px;}

#content
{
position: relative;
min-height: 100%;
background:#FF0000;
width:800px;
margin:0 auto;
}

* html #content
{
height: 100%;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="content">
<p>Here is a little content</p>
</div>
</body>
WebSardine
09-01-2006, 10:36 PM
Thank you! That seemed to be the magic I was looking for!
NXArmada
09-01-2006, 10:39 PM
If you want to add a footer and have it stay on the bottom of the screen just add this to the CSS:



#footer
{
position: absolute;
bottom: 0;
}


and place a Footer div within the Wrapper DIV like this (I changed ur Content div to Wrapper and added a Div for Content as it should be):



<div id="wrapper">
<div id="content"><p>Here is a little content</p></div>
<div id="footer">Footer Content</div>
</div>


Note: this will only work on short content. If the page has to scroll the footer will be at the bottom of the scroll. If you have short content like in my demo it will remain at the bottom of the browser window.