PDA

View Full Version : CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column



Rajan Thought
10-18-2011, 01:20 PM
1) CODE TITLE: CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column

2) AUTHOR NAME/NOTES: Rajan

3) DESCRIPTION: CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column

4) URL TO CODE:

or, ATTACHED BELOW (see #3 in guidelines below):
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css" >
.topbanner{width:100%; border:solid #cccccc 1px; background:#9CC}
.maindiv{overflow:hidden}
.rightcolumn{float:left; width:100%; border:solid #960 1px; background:#CCC}
.rightcolumninnertable{margin-left:400px;}
.leftcolumn{float:left; width:400px; margin-left:-100%; background:#99C; padding-bottom:1000em; margin-bottom:-999.5em}
.bottombanner{width:100%; height:25px; border:solid #cccccc 1px; background:#9CC}
</style>
</head>

<body>

<div class="topbanner"><h1>Top Banner</h1></div>
<div class="maindiv">
<div class="rightcolumn"><div class="rightcolumninnertable"><div style="margin:10px;">right Content Column: Fluid This is just some filler text Demo content nothing to read here This is just some filler text Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text Demo content nothing to read here This is just some filler text This is just some filler text Welcome to Dynamic Drive CSS Library Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Demo content nothing to read here This is just some filler text Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Demo content nothing to read here This is just some filler text Demo content nothing to read here This is just some filler text This is just some filler text Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library Welcome to Dynamic Drive CSS Library This is just some filler text This is just some filler text Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to Dynamic Drive CSS Library This is just some filler text This is just some filler text </div> </div></div>
<div class="leftcolumn"><h3>left column</h3></div>
<br style="clear:both"/>
</div>
<div class="bottombanner">Copy Rights</div>
</body>

Sharron
01-23-2012, 05:27 PM
Thank you! :D