Mick Redman: percent

Monday, 20 September 2010

Three column 100% height layout

I may create a more designer version of this later in the series. I just wanted to demonstrate how to create a multi column 100% height layout. Most examples I had seen on the web required a wrapper and lots of coding. I couldn't see why. No by doing it without lots of code and wrappers, I still can't.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Columns</title>
<style type="text/css">
* html body
{
height:100%;
}
*
{
margin:0;
padding:0;
height: 100%;
}
body
{
font-family:Sans-serif;
}
#column1, #column2, #column3
{
float:left;
min-height: 100%;
}
#column1, #column2
{
width:200px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:400px;
}
</style>
</head>
<body>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
</body>
</html>