Hier mal ein einfaches Beispiel eines zweispaltigen Layouts nach der
Faux Columns Regel:
HMTL
Code:
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"></div>
<!-- End Navigation -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<div class="clear"></div>
</div>
<!-- End Right Column -->
<div class="clear"></div>
</div>
<!-- End Faux Columns -->
</div>
<!-- End Wrapper -->
</body>
CSS:
Code:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#faux {
margin-bottom: 10px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 1000px;
background-image: url();
}
#header {
color: #333;
width: 1000px;
padding: 0px;
height: 230px;
margin: 10px 0px 0px 0px;
background: #D1DBDB;
background-image: url();
}
#navigation {
color: #333;
padding: 0px;
margin: 0px 0px 0px 0px;
background: #ABBEBE;
width: 1000px;
background-image: url();
}
#leftcolumn {
display: inline;
color: #333;
margin: 10px 0 0 10px;
padding: 0px;
width: 170px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 790px;
display: inline;
position: relative;
}
.clear { clear: both; background: none; }