CSS - 2 Divs in einer Reihe, dann nächste Reihe

Computer: Software & Programmierung HTML & CSS
#1

Hi zusammen.

Ich möchte mittels CSS Div-Boxen auf meiner Seite ausrichten und zwar so:

XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX
X X X X
X X X X
X X X X
X X X X
X X XXXXXXXXXXXXXXXXXX
X X
XXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX
X X X X
X X X X
X X X X
X X X X
XXXXXXXXXXXXXXXXX X X
 X X
 X X
 X X
 X X
 XXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX
X X X X
X X X X
X X X X
X X X X
X X XXXXXXXXXXXXXXXXXX
X X
XXXXXXXXXXXXXXXXX

Die Boxen haben unterschiedliche Höhen. Jedoch soll immer eine Reihe von 2 Divs entstehen (Diese Reihe hat die Höhe des höheren Divs).

Ich habs mit float:left und float:right versucht, will aber nicht funktionieren. Oder was mache ich falsch?

Wie geht das??

LG,
Sebastian

#2

Hi zusammen.

Ich möchte mittels CSS Div-Boxen auf meiner Seite ausrichten
und zwar so:

XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX
X X X X
X X X X
X X X X

X X X X

X X XXXXXXXXXXXXXXXXXX
X X
XXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX
X X X X
X X X X
X X X X
X X X X
XXXXXXXXXXXXXXXXX X X
X X
X X
X X
X X
XXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX
X X X X
X X X X
X X X X
X X X X
X X XXXXXXXXXXXXXXXXXX
X X
XXXXXXXXXXXXXXXXX

Die Boxen haben unterschiedliche Höhen. Jedoch soll immer eine
Reihe von 2 Divs entstehen (Diese Reihe hat die Höhe des
höheren Divs).

Ich habs mit float:left und float:right versucht, will aber
nicht funktionieren. Oder was mache ich falsch?

Wie geht das??

LG,
Sebastian

Hallo Sebastian,

warum packst du nicht jedes Pärchen in eine extra Box?
Also:

#3

clear : both
Hallo Sebastian,

dafür können DIV-Container die Eigenschaft „clear“ haben.

http://de.selfhtml.org/css/index.htm

Beispiel:

XHTML-Code:

Das bewirkt nichts, außer einer 0 px hohen Zeile, nach der jedes CSS-Layout wie von neuem beginnt.

CSS-Code:

.trenner
{
clear : both;
padding-top : 0px; padding-bottom : 0px; padding-right : 0px; padding-left : 0px; margin-top : 0px; margin-bottom : 0px; margin-right : 0px; margin-left : 0px;
}

Gruß

Stefan

#4

hi

also eine extra box rundherum muss gar nicht sein, denk ich

es geht schon mit float:left und clear:both

hier ein beispiel:

div boxen

#left1{
background-color:#FFFF99;
width:30%;
float:left;
margin-right:2%;
height:100px;}
#right1{
background-color:#66FFCC;
float:left;
width:22%;
height:150px;}
#left2{
background-color:#CC99FF;
width:20%;
float:left;
margin-right:2%;
height:210px;}
#right2{
background-color:#FF9933;
float:left;
width:32%;
height:130px;}
#clearfix{clear:both;}

1 Like
#5

Hallo
Absolut positionieren geht auf jeden Fall.
MfG

#6

Halo Matthias,

Absolut positionieren geht auf jeden Fall.

… was aber erst dann angeraten ist, wenn nichts anderes an Positionierungsarten mehr geht. Das ist hier aber nicht der Fall. Float und Clear sind hier die erste Wahl!

Absolute Positionierung ist die am schwierigsten zu beherrschende aller Positionierungsarten über CSS und sicherlich nichts für CSS-Anfänger!

Gruß Gernot

#7

Lösung
Hallo an euch alle.

Danke für die vielen Antworten.

Ich hab die Lösung verwenden mit dem „einfach ein Div rundherum“.

Ich habs jetzt so gemacht:
CSS

#outer{}
#left{float:left;}
#right{float:right;}
#clearer{clear:both;}

HTML

1) Div-Salat
 

 
 

2) Div-Salat
 

 
 

3) Div-Salat

Klappt einwandfrei… Danke euch!

Schönes WE.

Gruss,
Sebastian