3 column (csscreator)
This 3 column layout is based on the CSS Layout-Generator http://csscreator.com/tools/layout.
The code of this generator has the strange error that the width of the sidebars can only be edited as percentages. The resulting code is clean and straight forward, but allows only columns with the height of the containing text. What I am looking for is the contrary – full length columns with the all of the having the height of the longest column.
It also creates first the right and next the left column. The reason for that is not given.By exchanging the twocols-div with the leftcol-div this can be changed easily. The positioning is down by left and right floating with the middle and right column combined in the twocols-div.
HTML code
<!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" xml:lang="en" lang="en" > <head> <title>CssCreator-->XTML 1.0 Transitional Template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="www.csscreator.com" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="pagewidth" > <div id="header"> Head </div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" > <h2>Content</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p> </div> <div id="rightcol" > <h2>Right Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.</p> </div> </div> <div id="leftcol" > <h2>Left Sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p> </div> </div> <div id="footer" > Footer </div> </div> </body> </html> |
/* generated by csscreator.com */ html, body{ margin:0; padding:0; } #pagewidth{ width:1000px; } #header{ position:relative; height:100px; background-color:#E01F1F; width:100%; } #leftcol{ width:200px; float:left; position:relative; background-color:#209C1F; } #twocols{ width:800px; float:right; position:relative; } #rightcol{ width:200px; float:right; position:relative; background-color:#EC805C; } #maincol{ background-color: #aaa; float: left; display:inline; position: relative; width:600px; } #footer{ height:100px; background-color:#1C2F8C; clear:both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;} } |