CSS Layout

peX

Hallo,

ich glaube ich drehe gleich durch, habe schon lange nichts mehr in diese Richtung gemacht und brauche jetzt Hilfe.

Also ich hätte gerne ein Layout mit einem Header und dann gefolgt von einer Reihe mit 2 Spalten und darunter nochmal das Gleiche.

HEADER
---------------------
LISTE1 | DETAIL 1
---------------------
LISTE2 | DETAIL 2

Ich bekomme es irgendwie nicht hin das die DIV korrekt angezeigt werden. Entweder sind die DIVs alle untereinander oder aber nur die Liste1 steht links und die anderen 3 rechts.

Vielen Dank.

Grüße
peX

Basi

Dann müsstest du uns jetzt nur noch zeigen wie dein Code bisher aussieht.

peX

Ups.
Also ganz einfach, erstmal wirklich nur der reine Aufbau.

CSS

<style>




#container {
    background-color: white;
    width: 1100px;
    border: 0px solid #000000;
    margin:0px auto;
}




#searchArea {
    background-color:white;
    width: 1100px;
    border: 0px solid #000000;




}




#accountList {
    float: left;
    background-color:white;
    width: 500px;
    height: 100px;




}




#accountDetail {
    float: left;
    background-color:white;
    width: 500px;
    height:100px;




}




#oppList {
    background-color:white;
    width: 550px;
    float: left;
    border: 0px solid #000000;




}




#oppDetail {
    background-color:white;
    width: 1100px;
    border: 0px solid #000000;




}




</style>

Alles anzeigen

Basi

Den HTML Code brauchen wir ebenso um den Dokumentfluss nachvollziehen zu können.

peX

Danke.

HTML

<div id="container">




<div id="searchArea">
</div> <!-- DIV SEARCHAREA ENDE -->




<div id="accountList">
</div> <!-- DIV accountLIST ENDE -->




<div id="accountDetail">
</div> <!-- DIV accountDETAIL ENDE -->




<div id="oppList">
</div> <!-- DIV OPPLIST ENDE -->




<div id="oppDetail">
</div> <!-- DIV OPPDETAIL ENDE -->




</div> <!-- DIV CONTAINER ENDE -->

Alles anzeigen

Basi

Hi, wenn du die Breite des letzten DIVs entsprechend anpasst funktioniert das Ganze doch einwandfrei: codepen.io Beispiel 1

Die Elemente nutzen hier automatisch die verfügbare Fläche, wenn du einen Umbruch erzwingen möchtest musst du das float: left; nur ein mal an entsprechender Stelle mit clear: left; unterbrechen: codepen.io Beispiel 2 (Siehe CSS Zeile 32).

wolf

Hier mal was mit der flexbox umgesetzt..: http://codepen.io/wolf-w/pen/QbGqvW

peX

Cool Danke, funktioniert.
Das clear kannte ich noch nicht.

Jetzt mitmachen!