2 column
This 2 column layout is was used by my own for a website which I created about 4 years ago. The origin of the code however is unknown to me.
The trick here is the same one as before by using the border color of the outer-div.
#outer{ /*/*/ border-left-width: 210px ; /* left column width. NN4 hack to hide borders */ border-left-color: #F7F1DF; /* left column colour */ border-left-style: solid; background-color: #FF00F0; /* center column colour */ width: auto; } |
Why this does not create the same strange effect as in the example 3 column (intensivstation.ch) is however unkown to me.
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" > <title>title</title> <link rel="stylesheet" href="style.css" type="text/css" > </head> <body> <div id="pagewidth"> <div id="topleft"></div> <div id="topright"></div> <div class="clear"></div> <div id="navleft"></div> <div id="navright"></div> <div class="clr"></div> <div id="outer"> <div id="inner"> <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 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 class="clr"></div> <div id="footer">Footer</div> </div> </div> <div class="clr"></div> </div> </body> </html> |
html, body { margin: 0; padding: 0;} body { color: #000; background-color : #fff;} .clear {clear: both; margin: 0; padding: 0; } .clr {clear:both;} /*************************** Site Layout ****************************/ #bottom {font-size: 1px; line-height:0; margin:0; padding:0;} #pagewidth { width:1000px; min-width:500px; background-color : #fff; color: #000; } #footer{ font-size: 0.8em; background-color: #00f; /* BODY background color */ font-size: 100%; float: left; text-align: left; padding-bottom:2em; margin: 0; width:100%; position: relative; } /*** IE6 needs this to display the div ***/ /* === The trick for displaying the left column ==== */ #outer{ /*/*/ border-left-width: 210px ; /* left column width. NN4 hack to hide borders */ border-left-color: #F7F1DF; /* left column colour */ border-left-style: solid; background-color: #FF00F0; /* center column colour */ width: auto; } #inner{margin:0; width:100%;} */ #outer>#inner { border-bottom: 0px solid #fff; } /* === The content containing div's === */ #leftcol{ width:210px; float:left; position:relative; margin-left:-210px; margin-right:0px; color: #000; /* Text color for left column */ padding-top: 5px; /* background: url("images/sidebar.png") top right repeat-y; /* This image contains the border for the left column */ */ } #maincol{ border-left: 0px solid #fff; float: left; width: 100%; position: relative; margin: 0 -8px 0 0px; /* Generated at www.csscreator.com */ } /* === Here (full width) content in the main part goes to ==== */ #contents { width:40em; background-color: #fff; color: #000; margin: 8px 5px 5px 0px; /*distance to outer border */ padding: 3px 3px 15px 3px; /*distance to inner text borders*/ position: relative; } /*** IE6 needs this to display the div ***/ div#topleft { float: left; width: 210px; height: 65px; background: #4c73e0; color: #fff; margin: 0; padding: 0;} div#topright { float: left; width: 790px; height: 65px; background: #5b87ff; color: #fff; margin: 0; padding: 0;} div#navleft { float: left; width: 210px; height: 30px; background: #2244aa; color: #fff; margin: 0; padding: 0;} div#navright { float: left; width: 790px; height: 30px; background: #4c73e0; color: #fff; margin: 0; padding: 0;} |