Frage stellen
ich "verzweifele" im Moment an einem 3 - spaltigen Layout.
Es gibt einen Kopfbereich, dann 3 Spalten nebeneinander und unten eine Fusszeile. Die Fusszeile ist "sticky" gemacht.
Mein Problem sind die 3 Spalten und dann die Fusszeile. Ich möchte im Quelltext zuerst die mittlere Spalte (content) stehen haben. Danach die linke und die rechte Spalte. Soweit klappt das auch alles. Was nicht so funktioniert, wie ich mir das vorstelle ist der clear:
Solange die mittlere Spalte die längste ist, ist alles ok. Bei verkleinertem Browserfenster wird die Fusszeile richtig angezeigt. Ist die mittlere Spalte aber kürzer als der Rest, so fliessen die beiden äusseren float-Bereiche unten aus dem umgebenden div heraus und in die Fusszeile hinein!
Bis lang habe ich keine Lösung für mein Problem gefunden. Es wäre super, wenn mir hier jemand helfen könnte.
Ciao,
Mike
[Ich habe diesen Beitrag auch im SELFHTML - Forum gepostet, aber leider noch keine Antwort erhalten.]
- Code: Alles auswählen
<DOCTYPE>
<html>
<head>
<title>Float - Problem</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#page{
padding: 0;
margin-top: 0;
margin-bottom: 130px;
position: relative;
top: 0;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
}
#header {
margin: 10px;
border:1px solid green;
text-align: center;
}
#main-page{
padding-bottom:100px;
height:auto !important;
border: 2px solid green;
clear: both;
}
#content {
float: left;
margin-left: 210px;
margin-right: 170px;
border:1px solid red;
}
#submenu {
float:left;
position: absolute;
left: 0px;
margin-left: 10px;
width: 180px;
border:1px solid red;
}
#info {
float: right;
position: absolute;
right: 10px;
width: 150px;
border: 1px solid blue;
}
#footer {
width: 100%;
clear: both;
text-align: center;
position:absolute;
bottom: 0 !important;
bottom:-1px;
height: 80px;
border:1px solid green;
}
</style>
</head>
<body>
<div>
<div>
<p>Kopfzeile</p>
</div>
<div>
<div>
<p>Content</p>
<p>Content - Content - Content - Content<br>
Content - Content - Content - Content<br>
Content - Content - Content - Content<br>
</p>
</div>
<div>
<p>submenu</p>
<ul>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>
</div>
<div>
<p>Info:</p>
<p>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br></p>
</div>
<div>CLEAR</div>
</div> <of>
<div>
<p>Fusszeile</p>
</div>
</div> <of>
</body>
</html>
