@mazzo
folgendes habe ich mal gemacht:
- mit dem clearfix erreiche ich, dass der die .box 'en im #inhalt bleiben
- mit #klammer + clearfix, dass der gbanner nicht daneben rutscht
- fusszeile ganz raus aus dem #container
- gbanner rein in den #inhalt
"Faux columns" habe ich so verstanden, dass das nur eine Täuschung ist, die floats aber ihre Höhe behalten und nicht ausgedehnt werden.
Firefox: immer noch Abstand zwischen info und fuss
IE: sieht schon ganz gut aus
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="de" lang="de">
<head>
<title>new</title>
<style type="text/css">
#container
{
color:#000000;
height:1%;
}
#navigation
{
background-color:#99FF00;
color:#000000;
float:left;
width:10em;
}
#infobox
{
background-color:#99FF00;
color:#000000;
float:right;
width:165px;
height:600px;
}
#inhalt
{
background-color:#00FFFF;
color:#000000;
margin-left:11em;
margin-right:170px;
height:1%;
}
.box
{
background-color:#9966FF;
color:#000000;
width:13em;
float:left;
}
#gbanner
{
background-color:#FF00FF;
color:#000000;
margin:auto;
width:450px;
}
#fusszeile
{
background-color:#0000FF;
color:#FFFFFF;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="container">
<div id="navigation">
menü1
menü1
menü1
menü1
menü1
menü1
menü1</p></div>
<div id="infobox">info</div>
<div id="inhalt" class="clearfix" ><h3>Hier kommt eine Überschrift</h3>
und möglicherweise auch Inhalte.</p>
<div id="klammer" class="clearfix">
<div class="box">
box
box
box
box
box
box</p></div>
<div class="box">
box
box
box
box
box
box</p></div>
<div class="box">
box
box
box
box
box
box</p></div>
<div class="box">
box
box
box
box
box
box</p></div>
<div class="box">
box
box
box
box
box
box</p></div>
</div>
<div id="gbanner">gbanner</div>
</div>
</div>
<div id="fusszeile">fuss</div>
</body>
</html>