DIV Boxen neben- und untereinander

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich beschäftige mich in letzter Zeit etwas mit HTML/CSS und stehe jetzt vor einem Problem.
Ich möchte vier DIV-Boxen nebeneinander (zentriert) anzeigen und darunter noch mal vier.

Bsp.:
[ATTACH]4691[/ATTACH]

Jetzt gebe ich in eine der DIV’s etwas mehr Text ein und plötzlich verschieben sich alle anderen nach unten.

[ATTACH]4692[/ATTACH]

Ich stehe gerade völlig auf dem Schlauch und komme nicht mehr weiter.
Mit float: left; werden mir alle DIV’s nebeneinander angezeigt, was ich auch wieder nicht möchte.

Hat evtl. jemand eine Idee?

Danke im voraus!

VG,

Nubbel

index.html

[CODE]

Test

Test Sprungserver

Rechts123
456

Mitte123
456

Test123456 Mitte123
456

Links123
456

5
6
7
8
[/CODE]

style.css

[CODE]* {
background: #009036;
font-family: Helvetica;
margin: 0;
padding: 0;
}

header {
background: #B1C800;
height: 6em;
text-align: center;
display: block;
}

h1 {
background: #B1C800;
font-size: 5em;
color: #00519D;
}

h2{
background: #B1C800;
color: #00519D;
border-radius: 1em;
}

#top, #bottom{
display: block;
text-align: center;
margin: 0 auto;
}

#box-left {
display: inline-block;
margin-right: 0.313em;
margin-top: 1em;
margin-left: 0.5em;
width: 12.5em;
height: 21.875em;
border-radius: 1em;
background: #B1C800;
}

#box-middle {
display: inline-block;
margin-right: 0.313em;
margin-top: 1em;
width: 12.5em;
height: 21.875em;
border-radius: 1em;
background: #B1C800;
}

#box-right {
display: inline-block;
margin-top: 1em;
width: 12.5em;
height: 21.875em;
border-radius: 1em;
background: #B1C800;
}
[/CODE]

2

vertical-align oder gleich display:flex.
Und doppelte IDs sind sowieso falsch.
Zum Stylen verwendet man CSS-Klassen - niemals IDs.

3

Danke erst mal für den Hinweis. Ich habe es jetzt mit

.container{ margin: 0 auto; display: -webkit-flex; display: flex; }
hinbekommen, dass alle auf einer Höhe sind. Nun sind die DIV’s allerdings linksbündig und ich bekomme die ums verecken nicht mehr zentriert.

4

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5

Gerade selbst hinbekommen mit

-webkit-justify-content: center; justify-content: center;