Mike K: Problem mit mehreren float Boxen und clear

Beitrag lesen

SELF-Forum

Problem mit mehreren float Boxen und clear

Mike K
– Informationen zu den Bewertungsregeln

Hallo SELFHTML - Gemeinde,

ich "verzweifele" im Moment an einem 3 - spaltigen Layout.

Es gibt einen Kopfbereich, dann 3 Spalten nebeneinander und unten eine Fusszeile. Die Fusszeile ist mit dem Code aus diesem Forum "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

<!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>Float - Problem</title>
<style type="text/css">

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 id="page">

<div id="header">
         <p>Kopfzeile</p>
      </div>

<div id="main-page">

<div id="content">
            <p>Content</p>
            <p>Content - Content - Content - Content<br />
               Content - Content - Content - Content<br />
               Content - Content - Content - Content<br />
            </p>
         </div>

<div id="submenu">
            <p>submenu</p>
            <ul>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
              <li><a href="#">item</a></li>
            </ul>
         </div>

<div id="info">
            <p>Info:</p>
            <p>Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br /></p>
         </div>

<div style="clear:both;text-align:center;">CLEAR</div>

</div> <!-- of main-page -->

<div id="footer">
         <p>Fusszeile</p>
      </div>

</div>  <!-- of page -->

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln