| 

.NET C# Java Javascript Exception

3
Hallo,

eigentlich dachte ich, ich entwerfe kurz ein simples CSS Layout. Leider scheint mein Anliegen entweder gar nicht so simple zu sein oder ich sehe gerade vor lauter Bäumen den Wald nicht mehr.
Ich möchte ein CSS Layout in 3 Teilen aufbauen.



Ich bekomme zwar den rechten unteren Container nach unten geschoben, allerdings kann ich diesen durch die CSS Property "position:absolute" nicht mehr richtig gestallten. Die 100% Breite überlappen über den Container. Den linken Bereich bekomme ich überhaupt nicht korrekt positioniert.

<div style="height:100%; width:100%; border: 1px solid black; padding-bottom: 55px; background-color:yellow;">
   CENTER
   <div style="height:10%; width:100%; position:absolute; bottom:0px; background-color:red;">FOOTER</div>
  </div>


Ich möchte auf keinen Fall wieder auf ein Tabellen Layout zurückgreifen da gerade der IE dort alles grundsätzlich anderes interpretiert sobald es um 100% Höhen geht.

Vielleicht hat hier jemand eine Idee wie man ein solches Layout via CSS umsetzt.
27.01.2014
Slashi
Slashi
409 ● 2 ● 8
Editiert 27.01.2014
Floyd
Floyd
14,6k ● 3 ● 9
Wie soll das Layout aussehen? 3 Spalten?
– Floyd 27.01.2014
Leider wird das Bild als [IMG] nicht angezeigt. Ich habe den Link sichtbar eingefügt. Sorry.
– Slashi 27.01.2014
Korrigiert
– Floyd 27.01.2014
1 Antwort
2
HTML:
<div class="OUTER">
  <div class="LEFT">LEFT</div>
  <div class="TOP">TOP</div>
  <div class="BOTTOM">BOTTOM</div>
</div>


CSS:
.OUTER{
    width:100%;
    height:600px;
}
.OUTER, .OUTER DIV{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;    
}

.LEFT{
    background:#f00;
    width:20%;
    height:100%;
    float:left;
}
.TOP{
    background:yellow;
    width:80%;
    height:80%;
}
.BOTTOM{
    background:green;
    width:80%;
    height:20%;
}


Beispiel:
http://jsfiddle.net/ThHuY/show/
27.01.2014
Floyd
Floyd
14,6k ● 3 ● 9
Editiert 27.01.2014
Floyd
Floyd
14,6k ● 3 ● 9
Wow. Das passt super. Ich habe die Breiten noch angepasst und mit dem Border habe ich den Abstand zu den Container "simuliert". 1000 Dank!
– Slashi 27.01.2014
Dafür gäbe es noch Padding und Margin ... Aber freut mich das ich helfen konnte.
– Floyd 27.01.2014

Stelle deine Html-Frage jetzt!