Footer and 2 columns to bottom, header wider than columns

HTML & CSS
1

After quite a while I’m trying to get back into HTML/CSS (again). I’ve made a design with a 100% wide header and footer, fluid columns (% and em), and have figured out how to get my footer to the bottom, but after a few days I can’t find how to go about getting my 2 columns to extend to at least the bottom as well, especially since I want my header to be wider than the columns combined (if it was the same width from top to bottom it’s simple with the wrapper that I’m using for the footer). I’m also wondering if this is achievable without using an image for faux column effect. This is what I have so far. Not sure if a solution is possible from this or I need a new concept from the top.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style>
*{padding:0;margin:0}
body,html{height:100%;background:#000;}
#wrapper{
	position:relative;
	min-height:100%;
	background:#333;
	}
#header{
	height:400px;
	padding-top:100px;
	background:purple;
	}
#navigation{
	width:80%;
	padding-left:20%;
	background:green;
	}
h1{
	padding-left:20%;
	background:blue;
	}
#content{
	width:60%;
	margin:0 auto;
	display:table;
	}
#main{
	display:table-cell;
	background:red;
	}
#side{
	display:table-cell;
	background:yellow;
	width:30em;
	}
#footer{
	position:absolute;
	bottom:0;
	padding-left:20%;
	padding-right:20%;
	width:60%;
	background:orange;
}
</style>
<title>example</title>
<div id="wrapper">
<div id="header">
<div id="navigation">navigation</div>
</div>
<h1>heading 1 100% wide</h1>
<div id="content">
<div id="main">
Some main content
</div>
<div id="side">
Some side content
</div>
</div>
<div id="footer">
Some footer stuff
</div>
</div>
2

To get the equal height column without images, please refer to this post. Very crafty method and is reliable.

3

HI,

For modern browsers (ie11,Firefox and Chrome) you can do this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body, html {
	height:100%;
	background:#000;
	margin:0;
	padding:0;
}
.wrapper {
	height:100%;
	width:100%;
	background:#333;
	display:table;
}
.tr {display:table-row}
.tc {
	display:table-cell;
	vertical-align:top
}
.footer {
	height:1px;
	background:orange
}
.header {
	background:red;
	height:1px
}
.inner {
	height:100%;
	background:yellow;
	display:table;
	width:80%;
	margin:auto
}
.main3{background:green}
</style>
</head>

<body>
<div class="wrapper">
		<div class="tr">
				<div class="tc header">
						<p>header</p>
						<p>header</p>
						<p>header</p>
						<p>header</p>
						<p>header</p>
						<p>header</p>
				</div>
		</div>
		<div class="tr">
				<div class="tc main">
						<div class="inner">
								<div class="tc main2">Left 2</div>
								<div class="tc main3">Left 3</div>
						</div>
				</div>
		</div>
		<div class="tr">
				<div class="tc footer">Footer</div>
		</div>
</div>
</body>
</html>

Older browsers will just have to have content height for the two columns.

If you had a fixed width column you could get it working down to IE8 (very old demo) but would still need full width for the middle columns although you could probably make space using borders on the cells or similar.

4

Thank you for the replies. Ryan, the problem with Dan’s method is that the container (which stretches to the top, above the header content) has to have the same background as one of the columns to get the effect, which my design doesn’t allow since I want a 100% wide header but not 100% wide columns (i.e. I want the body/html background to be visible).

Paul, your example is pretty much the baseline I needed. Another approach I was thinking that might support IE versions <11 was using absolute positioning on the columns or their container, set height 100%, top-padding for the header and then box-sizing:border-box so the padding doesn’t add to the height, but from what I’ve seen that doesn’t work for IE<10, and don’t have IE10 to test it there.

5

No that won’t work as 100% height on anything but a display:table element gives you only 100% and no more. That means content can never grow and columns will not extend pass the 100% limit.

If you have fixed height headers and footers you can use my absolute overlay method (warning very ancient demo) but having a fixed height for the header and footer is no good in these days of RWD and should be avoided. You could also use the large padding-bottom and large bottom negative margin method to extend columns but that breaks ‘in page’ links and is also best avoided.

I would use the display:table method and just remove the height for older IE so it gets a normal layout with footer following the content .:slight_smile:

(BTW box-sizing:border-box works back to IE8)

6

Re fixed height headers/footers, what is the point of setting height:1px in the code you posted? I mean I see if I remove it the header/footer expands a lot. But if I set their containers (tr) to display:table-header-group and table-footer-group respectively, it acts “normally” w/o a specified height. Are there advantages/drawbacks here?

7

When you set a table to height:100% then all of the rows must add up to 100% otherwise the table has no integrity. So by default the table would assign 33% height to each row in a 3 row table. By setting the header and footer to 1px height this allows the middle section to extend fully from top to bottom as it now just fills all the space. Table cells treat height as a minimum so the height will not limit the cell height but make it instead a shrink to fit approach where height is concerned. This is perfect for the sticky footer scenario as it allows the height to be dictated by the content.

Setting header and footer groups will also have the same affect but are not so reliable as the height:1px method when using the minimalist version of the sticky footer and won’t work here ( generally with display:table properties you can just use ‘table-row’ and the browser builds the cell automatically or vice versa.