• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage DIV Boxen neben- und untereinander

nubbeldupp

nubbeldupp

Neues Mitglied
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.:
div.PNG

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

div2.PNG

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: 
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <header>
    <h1>Test Sprungserver</h1>
  </header>
  <body>
    <div id="top">
      <a href="#">
        <div id="box-left">
          <h2>
            Rechts123<br/>
            456
          </h2>
        </div>
      </a>
      <a href="#">
        <div id="box-middle">
          <h2>
            Mitte123<br/>
            456
          </h2>
        </div>
      </a>
      <a href="#">
        <div id="box-middle">
          <h2>
            Test123456
            Mitte123<br/>
            456
          </h2>
        </div>
      </a>
      <a href="#">
        <div id="box-right">
          <h2>
            Links123<br/>
            456
          </h2>
        </div>
      </a>
    </div>
    <div id="bottom">
      <div id="box-left">
        5
      </div>
      <div id="box-middle">
        6
      </div>
      <div id="box-middle">
        7
      </div>
      <div id="box-right">
        8
      </div>
    </div>
  </body>
</html>

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;
}
 
Werbung:
vertical-align oder gleich display:flex.
Und doppelte IDs sind sowieso falsch.
Zum Stylen verwendet man CSS-Klassen - niemals IDs.
 
scbawik schrieb:
vertical-align oder gleich display:flex.
Und doppelte IDs sind sowieso falsch.
Zum Stylen verwendet man CSS-Klassen - niemals IDs.
Zum Vergrößern anklicken....

Danke erst mal für den Hinweis. Ich habe es jetzt mit
Code: 
.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.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben