html css layout with header two columns and footer

Question

I am trying to create a head area that is 100px in height and spans 100% in width. I need 2 columns with the left one being 250px wide and 100% in height down to the footer. The right column should be 100% of the remaining page width and 100% in height to the footer. The footer should be at the bottom of the page and 100px in height and 100% in width. Even if there is no content in the 2 columns, I need them to stretch down to the footer and have the footer visible without scrolling down to it.

Here is what I have so far.

<div id="top"><p>Lorem ipsum dolor sit amet</p></div>
<div id="left"><p>Lorem ipsum dolor sit amet</p></div>
<div id="right"><p>Lorem ipsum dolor sit amet</p></div>
<div id="bot"><p>Lorem ipsum dolor sit amet</p></div>

body, html {
    height: 100%;
}
body {
    margin: 0px;
}
p {
    margin: 0px;
}
#top {
    height: 100px;
    background-color: #F4F4F4;
}
#left {
    width: 250px;
    height: 100%;
    background-color: #878787;
    float: left;
    margin-bottom: -100px;
}
#right {
    background-color: #323232;
    height: 100%;
    margin-bottom: -100px;
}
#bot {
    clear: right;
    height: 100px;
    background-color: #DCDCDC;
    margin-top: -100px;
    z-index: 100;
    position: relative;
}

Here is another example with a table

<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0" class="" id="">
	<tr>
		<td colspan="2" style="background-color: powderblue; height: 100px;">Header</td>
	</tr>
	<tr>
		<td style="background-color: gray; width: 350px;">Left Col</td>
		<td style="background-color: DarkSeaGreen">Right Col</td>
	</tr>
	<tr>
		<td colspan="2"  style="background-color: tomato; height: 100px;">Footer</td>
	</tr>
</table>

Answer 1

In those cases, I recommend position: fixed or absolute. It works just like calc(), but in old browser too!

Demo

#top, #left, #right, #bot {
    position: fixed;
}
#top {
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left, #right {
    top: 100px;
    bottom: 100px;
}
#left {
    width: 250px;
    left: 0;
}
#right {
    left: 250px;
    right: 0;
}
#bot {
    height: 100px;
    bottom: 0;
}

---

It would also be a good idea (in case browser window is too small), to also use

html, body {
    height: 100%;
    position: relative;
    min-height: 300px; /* Minimum height */
    margin: 0;
}
#top, #left, #right, #bot {
    position: absolute;
}
#left, #right {
    overflow: auto; /* Enable scrollbars if necessary*/
}

Demo

Answer 2

Use calc(). It's awesome.

DEMO *FullscreenDEMO*

<div class="head">header</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="foot">footer</div>

---

   *{
    margin:0;
}
html,body{
    height:100%;
}
.head,.foot{
    width:100%;
    height:100px;
    background-color:red;
}
.left{
    width:250px;
    min-height:calc(100% - 200px);
    background-color:blue;
    display:inline-block;
    float:left;
}
.right{
    width:calc(100% - 250px);
    min-height:calc(100% - 200px);
    background-color:green;
    display:inline-block;
    float:left;
}
.foot{
    float:left;
}

Answer 3

Ok, here is an alternative using css tables. It works like this:

• #top and #bot are always 100px tall.
• #left will be 250px wide if it can.
• #right occupies all horizontal space left by #left
• #left and #right push #bot down.
• If there is vertical remaining space, #left and #right will grow so that #bot will be at the bottom of the window.

Demo

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
body {
    display: table;
}
#top, #bot {
    display: table-row;
}
#top {
    height: 100px;
}
#middle {
    display: table-cell;
    overflow: hidden;
}
#left, #right {
    margin-bottom: -100000px;
    padding-bottom: 100000px;
}
#left {
    width: 250px;
    float: left;
}
#right {
    overflow: hidden;
}
#bot {
    height: 100px;
}

It requires changing your html to

<div id="top"></div>
<div id="middle">
    <div id="left"></div>
    <div id="right"></div>
</div>
<div id="bot"></div>

---

Instead of 100000px, use a value greater than the height of #left and #right.

Since it's a bit hacky, you may prefer a css-tabular-only approach without floats, but doesn't work on IE8, although it only uses CSS2.1 features.