✔ Höhe 100% klappt im IE nicht

[Maik]

Und wo ist jetzt das Problem? Der graue Balken wird doch von oben bis unten dargestellt.

 

[aTa]

naja der Content beginnt im grauen Balken das ist total komisch und wenn ich padding oder margin mach dann springt er ne Zeile runter...
Ah nun ist es mir wieder eingefallen, sorry aber es ging um den linken Magentabalken neben der Navi, den bekomm ich nicht so hin dass er erst 50px unter dem Head anfängt.

 

[Maik]

Wenn du dem Content-DIV einen Innenabstand geben willst, muss das Maß von der Breitenangabe subtrahiert werden:

div#content {
float:right;
width: 510px;
padding-left: 10px;
}

 

[aTa]

Ah ok, danke schön.
Aber wie bekomm ich neben die Navi noch den Balken? Kann ich da nicht einfach noch ein div machen und es dann an der Stelle positionieren? Allerdings kommt dann wohl wieder das Problem mit Höhe 100%?

 

[Maik]

Was hälst du von dem Vorschlag, den Magenta-Streifen ebenfalls in der Hintergrundgrafik unterzubringen, und zwischen Header / Navigation ein leeres Element mit einer Höhe von 50 Pixel incl. einer Hintergrundfarbe einzusetzen, um den Streifen an dieser Stelle zu überdecken?

 

[aTa]

Danke Manchmal ist ein Schlag auf den Hinterkopf sehr sehr sinnvoll

 

[Maik]

Es geht noch eleganter, weil ohne ein zusätzliches leeres Element

div#navi {
float:left;
width:160px;
border-top:50px solid blue;
}

 

[aTa]

Nächstes Problem wenn der Inhalt größer wird, wird im IE alles nach unten verlängert, nur im Firefox nicht, trotz min-height: 100%.

Hier der Link Link

 

[Maik]

Du hast vergessen, diese CSS-Regel

div.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}

im Dokument anzuwenden:

<div id="center">
     <div id="head"></div>
     <div id="navi">navi</div>
     <div id="content">content</div>
     <div class="clear"></div>
<div>

 

[aTa]

Ah doch..sorry mein Fehler ich sollte jetzt ins Bett
DANKE!