Mehrere Div Boxen nebeinander in CSS Layout im Hauptbereich der Webseite anzeigen

  • Hi

    Ich befasse mich nur selten mit Webdesign. Ich habe kurz gegoogelt wie das so gehen könnte, aber nichts anständiges gefunden.

    Ich möchte mehrere Div Boxen nebeneinander im Hauptbereich von der Webseite anzeigen / darstellen, mit Abstand. Muss ich die Boxen in der CSS Datei definieren / erzeugen und dann im Hauptbereich / body der Webseite aufrufen oder kann ich die Div Boxen im body Bereich der Webseite erzeugen?

    Solche Div Boxen möchte ich nebeneinander darstellen im Hauptbereich der Webseite -> http://www.selfhtml5.org/2012-css3/10-p…-boxen-designs/

    Besten Dank für die Hilfe!

    Einmal editiert, zuletzt von Grimwald (18. März 2014 um 20:37)

  • Die Boxen selbst definierst du in HTML, das Aussehen in CSS. Für das Darstellen nebeneinander nimmst du float (google doch das mal, dann findest du ganz viele Anleitungen).
    Viele Grüße
    Nadja

  • Als Beispiel:

    CSS

    Code
    .box {
      float: left;
      width: 200px;
      height: 350px;
      margin: 3em;
      background-color: #D1D1E4;
      border-radius: 0 0 18px 18px;
      box-shadow: 0px 5px 0px 0px #E3E7E8;
    }

    "float: left;" macht, dass die Boxen immer nebeneinander angezeigt werden.

    HTML

    Code
    <div class="box">Inhalt</div>

    Um noch mehr über das Design dieser Boxen zu erfahren oder um die Copy & Paste Examples zu holen:
    css box shadow css box round corners