Einzelnen Beitrag anzeigen
  #7 (permalink)  
Alt 31.05.2006, 13:43
fricca fricca ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Aha, jetzt ist's klarer.

Wenn du möchtest, dass sich ein clear nur innerhalb des Elements .inhalt auswirkt, dann musst du die Elemente in einem eigenen "Block Formatting Context" einkapseln.
Hier hat iChao aufgelistet, welche Eigenschaften sich dafür eignen.
In deinem Fall crossbrowsertauglich nicht ganz einfach anzuwenden.

Ich würde folgenden Ansatz versuchen:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>clear</title>
<style type="text/css">


#wrap {
    margin-left:100px;
    }

/* \*/
* html #wrap {
    height:1%;
    }
/* */

div.navi {
    float:left;
    width:100px;
    margin-left:-100px;
    background-color:#CCCCCC;
}

/* \*/
* html .navi {
    display:inline; /* anti doubled float-margin bug */
    position:relative;
    }
/* */

div.inhalt {
    float:left;
    width:100%;
}

div.links {
    width:100px;
    float:left;
    background-color:#FF0000;
}
div.rechts {
    margin-left:100px;
    background-color:#00FF00;
}

div.mitte {
    background-color:#FFFF00;
    clear:left;
}
</style>
</head>
<body>
<div id="wrap">
    <div class="navi"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
    <div class="inhalt">
        <div class="links">links mit viel Text</div>
        <div class="rechts">rechts</div>
        <div class="mitte">mitte</div>
    </div>
</div>
</body>
</html>
Damit der Bereich .inhalt ein float und eine Breite von 100% bekommen kann, wird das ganze in einen #wrap mit linkem margin eingeschlossen. Die .navigation wird mit negativem margin nach links auf den margin-Bereich von #wrap gezogen.
Der IE braucht ein bisschen Nachhilfe, aber in meinem Schnelltest (nur Win) gab's keine Probleme mehr.
Mit Zitat antworten