This 3 column layout is based on the example from intensivstation.ch
It used the following trick to generate the background for the columns
#outer{ border-left: solid 200px #EBD3E0; /* linke Menue Spalten Farbe */ border-right: solid 200px #EBD3E0; /* rechte Menue Spalten Farbe */ background-color: #ffffff; /* Farbe fuer Inhalt Spalten */ }
It however has the drawback the color is discontinued if the length of the right of left side exceedes the middle part.
<!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>No.3 :: CSS Template :: XTML 1.0 Transitional</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="3.css" type="text/css" /> </head> <body> <!-- Generated at www.csscreator.com --> <div id="container" > <div id="header" > <h2 id="toc-header">Header</h2> </div> <div id="outer" > <div id="inner"> <div id="left" > <h2 id="toc-left-sidebar">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="right"> <h2 id="toc-right-sidebar1">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.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="content"> <h2 id="toc-content1">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><!-- end content --> </div><!-- end inner --> </div><!-- end outer --> <div id="footer"><h2 id="toc-footer">Footer</h2></div> </div><!-- end container --> </body> </html>
/* *** Generated by www.csscreator.com *** */ /* *** modified by miss monorom www.intensivstation.ch *** */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by/2.0/deed.en */ body { background-color: #e1ddd9; font-size: 11px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px; margin:0px; } /* ----------container zentriert das layout-------------- */ #container { width: 950px; padding:0px; margin: 0px; margin-left: auto; /* zentriert */ margin-right: auto; /* zentriert */ } /* ----------banner for logo-------------- */ #header { background-color: #E0A3B7; border-top:1px solid #564b47; border-bottom:1px solid #564b47; padding: 0px; margin: 0px; } /* ----------outer und inner----------------- */ #outer{ border-left: solid 200px #EBD3E0; /* linke Menue Spalten Farbe */ border-right: solid 200px #EBD3E0; /* rechte Menue Spalten Farbe */ background-color: #ffffff; /* Farbe fuer Inhalt Spalten */ } #inner{margin:0; width:100%; } /* --------------left und right navigavtion------------- */ #left { width:200px; float:left; position:relative; margin-left:-200px; margin-right:1px; } #right { width:200px; float:right; position:relative; margin-right:-200px; margin-left:1px; } /* -----------------Inhalt--------------------- */ #content{ position: relative; padding : 10px; } /* ----------------footer---------------------- */ #footer { clear:left; background-color: #E0A3B7; border-top:1px solid #564b47; border-bottom:1px solid #564b47; padding:0px; margin:0px; }
