Forum Moderators: not2easy
I've got 4 <div>s inside a container, which all have the same background color.
The background color of the <body> is a lighter shade so that the <div>s stand out. I have set the background color of the container to match that of the <div>s so that the gaps inbetween them are filled.
However, when the browser window is made smaller vertically, these gaps start appearing (from the bottom up).
Any ideas?
here is the relevant code.....
---------------------------------------------------------------
html { height: 100%;
width: 100%;
min-height:100%;
}
body {
background-color: silver;
color: silver;
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 900px;
height: 100%;
min-height: 100%;
background-color: #333333;
margin: 0 0 0 100px;
float: left;
}
#header {
background-image: url(images/title.jpg);
background-repeat: no-repeat;
position: relative;
width: 900px;
height: 155px;
float: left;
}
#content {
width: 690px;
background-color: #333333;
float: left;
margin: 15px 0 15px 0;
padding: 0 0 0 0;
border-right: 1px solid silver;
}
#sidebar {
font-size: 0.83em;
background-color: #333333;
line-height: 1em;
width: 180px;
float: left;
padding: 0;
margin: 30px 0 25px 0;
}
#footer {
font-size: 0.8em;
background-color: #333333;
position: relative;
width: 875px;
padding: 25px 0 10px 25px;
float: left;
}
---------------------------------------------------------------
(DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN")
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
---------------------------------------------------------------
Thanks!
Tom
I'd recommend making the min-height of the container something around 250px, enough to reach the bottom of the footer div. (I don't think min-height works in IE, but the problem doesn't appear to affect IE).
Bsically I am having to set the min-height to suit the longest page on the site which make all the other pages too long. I dont want a vrtical scroll bar if it isnt necessary.
Surely there must be a way to have a central strip of color that extends from the top to the bottom of the document, within which the other DIVs sit?
I would the page im working on, but it is against forum rules :(
It's hard to give you advice on exactly how to do it without floating without know what design you're going for and how you're implementing it. The best I can say is: Since you're already using relative positioning, if you know the dimensions of the divs, you could use that to put them in place.
[edited by: Munsiblicious at 3:45 am (utc) on Jan. 22, 2008]
