|
|
<!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 with Content and Border Example</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-box">
<div class="top-box">Header Text, my website</div>
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left-col">
left;
<br/>
<br/>
<br/>
left;
</div>
<div class="right-col">
<div class="ribbon">
<img class="ribbonimg" src="gear.gif" />
<h5 class="title">Ribbon title</h5>
<div class="ribbontxt">
This is a ribbon text. Some type of tip.
This ribbon is placed on the right column and the column has the same background as the document making these boxes appear like "floating" on the document body.
</div>
</div>
<div class="ribbon2">
<img class="ribbonimg" src="gear.gif" />
<h5 class="title">Ribbon title</h5>
<div class="ribbontxt">
This is a ribbon text. Some type of tip.
This ribbon is placed on the right column and the column has the same background as the document making these boxes appear like "floating" on the document body.
</div>
</div>
<div class="ribbon2 nobordertop">
<img class="ribbonimg" src="gear.gif" />
<h5 class="title">Ribbon title</h5>
<div class="ribbontxt">
This is a ribbon text. Some type of tip.
This ribbon is placed on the right column and the column has the same background as the document making these boxes appear like "floating" on the document body.
</div>
</div>
<div class="ribbon2 nobordertop">
<img class="ribbonimg" src="gear.gif" />
<h5 class="title">Ribbon title</h5>
<div class="ribbontxt">
This is a ribbon text. Some type of tip.
This ribbon is placed on the right column and the column has the same background as the document making these boxes appear like "floating" on the document body.
</div>
</div>
<div class="ribbon3">
<img class="ribbonimg" src="gear.gif" />
<h5 class="title">Ribbon title</h5>
<div class="ribbontxt">
This is a ribbon text. Some type of tip.
This ribbon is placed on the right column and the column has the same background as the document making these boxes appear like "floating" on the document body.
</div>
</div>
</div>
<div class="center-col heightfix">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="250" height="250" id="text" align="middle" style="float:right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="text.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="text.swf" quality="high" bgcolor="#ffffff" width="250" height="250" name="text" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<p>As you can see, the center content is elastic and fills the remaining space. Try to resize your browser window to see the results. Left column will remain untouched because is pixel-fixed, while right column will change because it's percentage-fixed, then the center content will fill the remaining space. This layout is:</p>
<ul>
<li>total width: 80%</li>
<li>left width: 120px</li>
<li>right width: 22%</li>
</ul>
<a href="3col-cnb.left.html">See when the left column is longer</a><br />
<a href="3col-cnb.right.html">See when the right column is longer</a><br />
<a href="#link">This is a named anchor link (one of the problems of the super-padding approach)</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a name="link" tabindex="0">link here</a>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-box">bottom;<br /><br /><br />bottom;</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