HP-Bauer: Div neben- und untereinander anordnen! Aber wie?

SELF-Forum

Div neben- und untereinander anordnen! Aber wie?

HP-Bauer
– Informationen zu den Bewertungsregeln

Hi,

ich möchte innerhalb eines Divs 4 Divs reckteckig anordnen.

div1   div2

div3   div4

Der Abstand oben, unten, und zwischen den Divs soll überall gleich groß sein. Das Container-Div ist 582px breit und 500px hoch. Die innneren 4 Divs sind jeweils 245px breit und 140px hoch.

Irgendwie bekomme ich das nicht hin. Die Divs stehen überall nur nicht da wo sie sollen. Nachfolgend der CSS-Code. Was mache ich falsch?

div#container {
position:relative;
top:0px;
width:582px;
height:500px;
float:right;
background:#ffffff;
}
div#box1 {
position:relative;
top:70px;
width:245px;
height:145px;
float:left;
text-align:left;
font-family:Arial,Helvetica;
font-size:16px;
font-weight:bold;
}
div#box2 {
position:relative;
top:70px;
right:46px;
left:50px;
width:245px;
height:145px;
float:right;
text-align:right;
font-family:Arial,Helvetica;
font-size:16px;
font-weight:bold;
}
div#box3 {
position:relative;
top:70px;
width:245px;
height:145px;
float:left;
text-align:left;
font-family:Arial,Helvetica;
font-size:16px;
font-weight:bold;
}
div#box4 {
position:relative;
top:70px;
right:46px;
left:50px;
width:245px;
height:145px;
float:right;
text-align:right;
font-family:Arial,Helvetica;
font-size:16px;
font-weight:bold;
}

Bin für jeden Tipp dankbar.

MfG,
HP-Bauer

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div neben- und untereinander anordnen! Aber wie?

    XenonX
    −1 Informationen zu den Bewertungsregeln

    Nimm doch einfach die table Funktion ;)
    Damit sollte es kein Problem sein

    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

    1. Div neben- und untereinander anordnen! Aber wie?

      Zeromancer
      – Informationen zu den Bewertungsregeln

      Hallo XenonX,

      Nimm doch einfach die table Funktion ;)
      Damit sollte es kein Problem sein

      Wir haben 2005! :-)

      Mit freundlichen Grüßen,
      André

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Div neben- und untereinander anordnen

    Zeromancer
    – Informationen zu den Bewertungsregeln

    Hallo HP-Bauer,

    ich würde die Sache anders angehen:

      
<body>  
<div id="aussen">  
  
<div id="ro">   Inhalt rechts oben  
</div>  
  
<div id="lo"> Inhalt links oben  
</div>  
  
<div id="ru"> Inhalt rechts unten  
</div>  
  
<div id="lu">  Inhalt links unten  
</div>  
  
</div>  
</body>  


      
body {  
  padding:0px;  
  margin:0px;  
}  
div#aussen {  
  width:582px;  
  height:500px;  
  position:absolute;  
  top:50%;  
  left:50%;  
  margin:-250px 0 0 -291px;  
  border:solid 1px #f00;  
}  
  
div#lo {  
  width:245px;  
  height:140px;  
  border:solid 1px #000;  
  margin:20px 20px;  
}  
div#ro {  
  width:245px;  
  height:140px;  
  float:right;  
  border:solid 1px #0f0;  
  margin:20px 10px;  
}  
div#lu {  
  width:245px;  
  height:140px;  
  border:solid 1px #00f;  
  margin:20px 20px;  
}  
div#ru {  
  width:245px;  
  height:140px;  
  float:right;  
  border:solid 1px #ff0;  
  margin:0px 10px;  
}

    Mit "margin" und "padding" musst du mal ein bißchen spielen und rechnen. Sag mal Bescheid, wie es weitergeht!

    Mit freundlichen Grüßen,
    André

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Div neben- und untereinander anordnen

      HP-Bauer
      – Informationen zu den Bewertungsregeln

      Hallo André,

      vielen Dank für deine Antwort.

      Mit "margin" und "padding" musst du mal ein bißchen spielen und rechnen. Sag mal Bescheid, wie es weitergeht!

      Habe es nun ganz anders realisiert. Die Boxen sind jetzt auch 245px breit und 195px hoch. Das Script scheint zwar zu funktionieren, aber es ist m. E. völlig unlogisch,  warum ich in box3 und box4 bei "top:" den doppelten Abstand angeben muss, um den richtigen Abstand zu den oberen Divs zu erhalten. Kann mir dies jemand erklären?

      div#container {
      position:relative;
      top:0px;
      width:572px;
      height:500px;
      float:right;
      background:#ffffff;
      }
      div#box1 {
      position:relative;
      top:36px;
      width:245px;
      height:195px;
      float:left;
      text-align:left;
      font-family:Arial,Helvetica;
      font-size:16px;
      font-weight:bold;
      }
      div#box2 {
      position:relative;
      top:36px;
      right:50px;
      width:245px;
      height:195px;
      float:right;
      text-align:right;
      font-family:Arial,Helvetica;
      font-size:16px;
      font-weight:bold;
      }
      div#box3 {
      position:relative;
      top:72px;
      width:245px;
      height:195px;
      float:left;
      text-align:left;
      font-family:Arial,Helvetica;
      font-size:16px;
      font-weight:bold;
      }
      div#box4 {
      position:relative;
      top:72px;
      right:46px;
      right:50px;
      width:245px;
      height:195px;
      float:right;
      text-align:right;
      font-family:Arial,Helvetica;
      font-size:16px;
      font-weight:bold;
      }

      MfG
      HP-Bauer

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Div neben- und untereinander anordnen

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        Das Script

        Script? Welches Script ...?
        *scnr*

        scheint zwar zu funktionieren, aber es ist m. E. völlig unlogisch,  warum ich in box3 und box4 bei "top:" den doppelten Abstand angeben muss, um den richtigen Abstand zu den oberen Divs zu erhalten. Kann mir dies jemand erklären?

        Weil du relative Positionierung benutzt hast.

        Die beiden oberen Elemente hast du mit top:36px um 36 Pixel weiter nach unten "verschoben" in Bezug auf die Position, die sie im normalen Fluss einnehmen würden.
        Da der ursprüngliche Platz eines Elementes im normalen Fluss bei relativer Positionierung bekanntlich reserviert bleibt, beginnt die Position der beiden unteren Elemente dort, wo die _ursprüngliche_ Platzreservierung der beiden oberen endet [1].
        Also musst du, um diese unteren Elemente wiederum um 36 Pixel von ihren Vorgängern zu "entfernen", zunächst den Versatz dieser Vorgänger "nachholen" - macht 36px - und darauf die "neuen" 36px draufaddieren - ergibt 72px.

        [1] Dass sich die unteren Elemente überhaupt an den gefloateten oberen ausrichten, liegt hier natürlich daran, dass die unteren ebenfalls gefloatet sind. Andernfalls würden sie von der Position der oberen, die durch das floaten aus dem Elementfluss genommen sind, gar nicht mehr beeinflusst werden.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Div neben- und untereinander anordnen

          HP-Bauer
          – Informationen zu den Bewertungsregeln

          Hi,

          vielen Dank für die ausführliche und gute Erklärung!

          Script? Welches Script ...?
          *scnr*

          Ok, der CSS-Code. ;-)

          Weil du relative Positionierung benutzt hast.

          Ist es denn sinnvoll hier die relative Positionierung zu nehmen? Wie müsste man den Code umstellen, um das Ganze mit absoluter Positionierung hinzubekommen? Habe es versucht, aber bisher leider ohne Erfolg.

          MfG
          HP-Bauer

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Div neben- und untereinander anordnen

            Ingo Turski Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Ist es denn sinnvoll hier die relative Positionierung zu nehmen? Wie müsste man den Code umstellen, um das Ganze mit absoluter Positionierung hinzubekommen?

            das beste wäre, wenn Du die Eigenschaft position zumindest solange aus Deinem Gebrauch streichst, bis Du sie verstehst. Zumal in den meisten Fällen position wirklich nicht nötig ist.

            freundliche Grüße
            Ingo

            --
            [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln