Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I have recently been pulling my hair out while trying to produce a design that consists of 1 column and 3 rows. The layout contains 3 divs as show below.
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
The header and footer footer divs have a height of 150px and the main div needs to expand to 100% height to fill the space between the two other divs. I have tried unsuccessfully to do this and get it to work in i.e 5+, firefox and safari. If anyone could offer any assistance with this problem I would really appreciate the help.
Content within each of the listed divs above need to be centered. -
<html>
<head>
<style type="text/css">
<!--
html {height: 100%;}
body {height: 100%;margin: 0;}
#container {position: relative;min-height: 100%;}
* html #container {height: 100%;}
#header {height: 150px;}
#footer {height: 150px;position: relative;margin-top:-150px;}
#main{min-height: 100%;}
* html #main{height: 100%;}
#content {padding-bottom: 150px;}
-->
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="header">Your Header</div>
<div id="content"><p>Your Content</p></div>
</div>
</div>
<div id="footer">Your Footer</div>
</body>
</html> -
A lot of the examples out there are not very specific and cause some headaches. I hope my example helps -- you should be able to copy and past that into notepad and see it work (tested it in IE and FF). Put background colors on the main divs to see it really work.
-
The easy solution is not to make #main expand to fit the blank space, but to clear #main and make it expand to encompass it's inner content, and allow #footer to just position itself directly beneath #main.
Of course, to get #footer to position itself correctly in relation to relatively to #main, and #main to position itself correctly in relation to #header, they'll all need to be block-level elements (no problem, as they're all divs already). Also, in most cases it's probably best practice to float them all one direction and use a width-constrictive wrapper div to prevent them from being positioned side-by-side.
I'd do it more like this:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#wrapper {
float: left;
width: 700px;
}
#header {
float: left;
height:
150px;
width: 100%;
}
#main {
float: left;
width: 100%;
}
#footer {
float: left;
height: 150px;
width: 100%;
}
<div id="wrapper" class="clearfix">
<div id="header"></div>
<div id="main" class="clearfix">
This content will expand to fix all content inside of it, and should stay flush with #header. In turn, #footer will stay flush with this div, leaving no whitespace. The container #wrapper is cleared as well, so it should expand to fit all three internal divs quite nicely.
</div>
<div id="footer"></div>
</div>
Clearing is courtesy of http://www.positioniseverything.net/easyclearing.html. -
What if #main has a background color/image? You would want it to expand to fit the blank space. The solution is easy if you are not dealing with any colors and just using a white canvas (it desceptivly works).
-
I don't think I understand what you're trying to say... the entirety of the space is filled. I edited the code I provided to be more descriptive.
-
#container {position: relative;min-height: 100%;}
* html #container {height: 100%;}
/* (snip) */
#main{min-height: 100%;}
* html #main{height: 100%;}
all that time John and I spent showing you how to do stuff and you still write code that crusty? sheesh. :P
height : auto !important; /* ignored by IE, applied everywhere else */
height : 100%; /* IE treats as min-height */
min-height : 100%; /* IE ignores this */
1 to 8 of 8