I don't really like either of these, but food for thought, anyhow:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.masterContentFrame {
margin: 6em 1%;
padding-left: 240px;
}
.masterContentFrame .centerColumn {
position: relative;
/* float: left; */
background: #0f0;
height: 500px;
width: 100%;
}
.masterContentFrame .leftColumn {
position: relative;
float: left;
background: #f00;
height: 1000px;
width: 240px;
/* right: 240px; */
margin-left: -240px;
margin-top: -500px;
}
.masterContentFrame .rightColumn {
position: relative;
float: left;
color: #fff;
background: #00f;
height: 400px;
width: 100%;
/* right: 240px;
margin-left: 1px;*/
}
.footer { clear: both; width: 100%; height: 80px; background: orange;}
</style>
</head>
<body>
<div class="header"></div>
<div class="masterContentFrame">
<div class="centerColumn">Lorem ipsum</div>
<div class="leftColumn">Lorem ipsum</div>
<div class="rightColumn">Lorem ipsum</div>
</div>
<div class="footer"></div>
</body>
</html>
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.masterContentFrame {
margin: 6em 1% 6em 240px;
position: relative;
}
.masterContentFrame .centerColumn {
background: #0f0;
height: 500px;
width: 100%;
}
.masterContentFrame .leftColumn {
position: absolute;
float: left;
background: #f00;
height: 1000px;
width: 240px;
left: -240px;
top: 0;
}
.masterContentFrame .rightColumn {
color: #fff;
background: #00f;
height: 400px;
width: 100%;
}
.footer { clear: both; width: 100%; height: 80px; background: orange;}
</style>
</head>
<body>
<div class="header"></div>
<div class="masterContentFrame">
<div class="centerColumn">Lorem ipsum</div>
<div class="leftColumn">Lorem ipsum</div>
<div class="rightColumn">Lorem ipsum</div>
</div>
<div class="footer"></div>
</body>
</html>
Reply With Quote
Bookmarks