With the layout of a new site I am looking at CSS Site Layout techniques again. Unfortunately not everthing I can find or have used so far can fullfill my requirements. So in the following I will go though the techniques I could find and there drawbacks. Interestingwise the code created by the CSS Creator has changed a lot during the last years, since most of the example are based originally on this creator.
- Right side column (Light Biz)
- 3 column (intensivstation.ch)
- 3 column (csscreator)
- 2 column
- 3 column with full length columns
- 3 column with full length columns (maxdesign)
Right side column (Light Biz)
This one based on the theme lightbiz.
It uses a content div containing everthing. This one is centered using the “margin: auto” technique and has a fixed size. The left and rigth column are both with fixed size and floated left and right. This approach is simple but does not allow all columns to have equal colored backgrounds with unequal sizes.
View the Layout CSS codeHTML 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">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Matthias Pospiech</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<a name="top"></a>
<div class="content">
<div class="rside">
<div class="topmain">Hauptmenu</div>
<div class="menu">
<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 class="lside">
<div class="breadcrump">Breadcrump</div>
<div class="main">
<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>
<div class="footer">
Footer
</div>
</div>
</body>
</html> |
body { margin:5px 0; padding:0; font: 74% Arial, Sans-Serif; color:#FFF; line-height: 1.4em; background : #3C4049;} .content { color: #505050; margin: 0 auto; padding: 0; width: 760px; background: #FAFAFA; } /*LEFT SIDE */ .lside { background: #FFF; color: #000; width: 579px; float: left; } .lside .main { background: #FFF; color: #505050; padding: 15px 20px 15px 20px; } .lside .breadcrump { background: #E6E9EE; color: #505050; width: 580px; height: 15px; margin: 0; padding: 5px 0px 5px 0px ; font-size: 90%; } /*trbl*/ /* RIGHT SIDE */ .rside { background: #000; color: #000; width: 180px; float: right; clear: both; } .rside .topmain { background: #FF8D00; height: 15px; color: #FFF; padding: 5px;} .rside .menu { background: #FAFAFA; padding: 5px; color: #333; } /* FOOTER */ .footer { clear:both; width: 760px; padding-top: 3px; padding-bottom: 3px; color:#FFF; font-size:90%; background: #546078; text-align:center; } |