I’m trying to make a simple design where the most important factor is compatibility:
IE 5.5, IE 6, IE 7, and IE 8+
Firefox 3+
Safari 5+
Chrome 7+
I tried using a same height column and a footer, but if you detect browser problems we can drop the same height column css code and just use faux columns.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Test" />
<meta name="keywords" content="test" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<!--[if IE]>
<style type="text/css">
div {zoom:1; height: 1%;}
</style>
<![endif]-->
<div class="wrapper">
<div class="header">
<p>Header</p>
</div>
<div class="column" id="left">
<p>Left Column</p>
</div>
<div class="column" id="content">
<h1>Content</h1>
</div>
<div class="column" id="right">
<p>Right Column</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
/* CSS */
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color: #fff;
padding:0;
margin:0;
text-align: center
}
.wrapper {
width:960px;
margin:0 auto;
text-align:left
}
.header {
width: 100%;
height:50px;
float: left;
padding: 0px;
margin: 0;
background: #333 url(none) top left repeat-y
}
.column {
float:left;
height:350px
}
#left {
width:260px;
background: #333 url(none) top left repeat-y
}
#content {
width:500px;
background: #333 url(none) top left repeat-y
}
h1 {
font-size: 24px;
margin: 0
}
#right {
width:200px;
background: #333 url(none) top left repeat-y
}
.footer {
clear:both;
width: 100%;
padding:0px;
margin:0;
height:100px;
background: #333 url(none) top left repeat-y
}