|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Relatively Simple 3 equal-height columns CSS liquid Layout - Examples - 3 Ccolumns Empty Example</title>
<style>
div.main-box {
position:relative;
width:80%;
margin:0 auto;
overflow:hidden;
background:#B0C1C1;
border:solid 10px #993333;
}
div.top-box {
background:#336666;
text-align:center;
text-transform:uppercase;
border-bottom:solid 10px #993333;
}
div.bottom-box {
background:#336699;
text-align:center;
text-transform:uppercase;
border-top:solid 10px #993333;
}
div.left-box {
position:relative;
width:100%;
left:25%;
background:#D0E1E1;
border-left:solid 10px #993333;
}
div.center-box {
position:relative;
width:100%;
left:100px;
background:#FFFFCC;
border-left:solid 10px #993333;
}
div.reset-left-box {
position:relative;
width:100%;
left:100%;
margin-left:-25%;
}
div.reset-box {
position:relative;
width:100%;
margin-left:-100px;
}
div.reset-right-box {
position:relative;
width:100%;
margin-left:-120px;
left:-100px;
}
div.more-right-box {
position:relative;
width:100%;
background:#D0EEC0;
border-left:solid 10px #993333;
left:-30px;
}
div.right-box {
position:relative;
width:100%;
margin-left:100px;
background:#B0CEA0;
border-left:solid 10px #993333;
left:-10px;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:120px;
}
div.left {
float:left;
width:25%;
text-transform:uppercase;
}
div.more-left {
float:left;
width:100px;
margin-left:10px;
text-transform:uppercase;
}
div.right {
float:right;
width:120px;
text-transform:uppercase;
}
div.more-right {
float:right;
width:100px;
text-transform:uppercase;
}
div.center-no-left {
margin-left:100px;
margin-right:100px;
padding-left:10px;
}
div.center {
margin-left:25%;
margin-right:120px;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;
}
* html div.center-no-left {
height:1%;
margin:0;
}
* html div.more-left {
margin-right:-3px;
}
* html div.more-right {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}
</style>
</head>
<body>
<div class="main-box">
<div class="top-box">
<br/>top content<br/><br/>
</div>
<div class="left-box">
<div class="center-box">
<div class="reset-left-box">
<div class="reset-box">
<div class="reset-right-box">
<div class="more-right-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left">
<p>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="more-left">
<p>m<br/>o<br/>r<br/>e<br/><br/>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="right">
<p>r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="more-right">
<p>m<br/>o<br/>r<br/>e<br/><br/>r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="center heightfix">
<div class="center-no-left">
<p>c<br/>e<br/>n<br/>t<br/>e<br/>r<br/><br/>c<br/>o<br/>n<br/>t<br/>e<br/>n<br/>t</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-box">
<br/>bottom content<br/><br/>
</div>
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip