[CSS] Layer passt Größe nicht an

**wahsaga** · 01.04.2004, 09:33

Re: [CSS] Layer passt Größe nicht an

Original geschrieben von flolle
Wenn ich nun mehrere innere Layer, die eine größere Höhe haben als der Äussere, passen die Gecko Browser die Größe nicht automatisch an. Weiß einer woran das liegen könnte?

weil dein #center eine höhe von 100% hat.

**flolle** · 01.04.2004, 09:40

Daran hatte ich schon mal gedacht, lasse ich allerdings die Höhe komplett weg, zeigt er bei den Gecko Browsern gar keinen Border an. Im IE funktioniert es ebenfalls einwandfrei.

Eine fixe Größe kommt leider nicht in Frage, da der Inhalt dynamisch aus der DB kommt.

Kann es sein, dass es an dem float:left; liegt und es keine Lösung für nicht IE Browser gibt?

Danke!

**wahsaga** · 01.04.2004, 09:46

Original geschrieben von flolle
Kann es sein, dass es an dem float:left; liegt und es keine Lösung für nicht IE Browser gibt?

ach, da wird auch noch was gefloatet ... hab ich zuerst gar nicht gesehen.

mit float nimmst du ein element aus dem elementfluss heraus, sprich es beeinflusst danach die höhe seines elternlementes nicht mehr.

dem kannst du aber abhelfen, in dem du nach den beiden gefloateteten divs (und vor dem schliessen des umgebenden divs) noch ein (leeres) element einfügst, mit dem du das floaten wieder aufhebst.

Code:

<div id="center">

    <div style="...; float: left;">  
    </div>

    <div style="...; float: left;">  
    </div>

    [b]<div style="clear:left;"></div>[/b]
</div>

**flolle** · 01.04.2004, 10:02

Danke, aber ich glaube ich bin heute morgen etwas zu

Folgender Code produziert genau den selben Fehler. Nehme ich die Höhe bei dem äusseren Layer raus, wird er komplett ignoriert.

Code:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"  "http://www.w3.org/TR/html4/loose.dtd">
<html><head><style>
body{
    background: #FF4422;
    margin : 0px;
    text-align:center;
}

#center{
    width: 600px;
    height: 100%;
    margin : 0px auto;
    background: #666666;

    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

</style></head><body>

<div id="center">
 
     <div style="height: 1200px; width:200px; border: 1px solid #000000; background: #FFFFFF;  float: left;"> </div>
     <div style="height: 500px; width:200px; border: 1px solid #000000; background: #FFFFFF;  float: left;"> </div>

     <div style="clear:left;"></div>

</div>
</body></html>

Grüssle

**Wurzel** · 01.04.2004, 10:17

probier das mal:

Code:

#center{
    width: 600px;
    margin : 0px auto;
    background: #666666;

    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    overflow: auto;
}

**flolle** · 01.04.2004, 10:29

Super! Besten Dank an Euch!

Hat funktioniert!

Grüssle

[CSS] Layer passt Größe nicht an