div-Container nebeneinander anordnen

P

Pojan

Grünschnabel
Hallo Forum!

Ich habe ein Problem damit, div-Container nebeneinander anzuordnen.
Grundsätzlich besteht die Seite aus 4 Containern, einem über- und 3 untergeordneten.
Die 3 sollen nun nebeneinader stehen, was bei zweien auch klappt.
Der dritte wird jedoch eine Spalte nach unten versetzt.
Im Anhang ein Bild des "Problems".
Nachfolgend mein html-Code:
Code: 
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="behold">

     <div id="main">Main Container</div>
     <div id="middle">Mitten Container</div>
     <div id="side">Side Container</div>
</div>

</body>

Und so sieht das css-File aus:

Code: 
#behold {
width: 1024px;
height: 768px;
background-color: #FF1493;
text-align: center;
}
#main {
width: 250px;
float: left;
background-color: #FF8C00;
}
#middle {
width: 400px;
background-color: #DAA520;
}
#side {
width: 250px;
float: right;
background-color: #DCDCDC;
}
* {
margin: 0px auto;
}

Schlimm, wenn man schon am Anfang strauchelt.
Um ehrlich zu sein, weiß ich nicht einmal, ob es ein html- oder ein css-Problem ist.
Für Hilfe wäre ich dankbar.

Gruß,
Pojan
 

Anhänge

  • Clipboard01.jpg
    Clipboard01.jpg
    17,9 KB · Aufrufe: 1.700
Probier mal so herum ;)

HTML: 
<div id="behold">
      <div id="main">Main Container</div>
     <div id="side">Side Container</div>
     <div id="middle">Mitten Container</div>
</div>
 

Anhänge

  • screen.png
    screen.png
    8,5 KB · Aufrufe: 1.685
Zuletzt bearbeitet:
Arrgghh....
Jetzt gehts!
Vielen Dank!
Aber Neurodeamon, sei doch bitte noch so nett mir zu erklären, warum das jetzt klappt?
Ich verstehs nicht!

Gruß,

Dejan
 
Zuletzt bearbeitet:
Hi Pojan,

floats sind recht schwierig zu benutzen. Es gibt einige Fallen in der Verwendung.

Ich bin ganz ehrlich: Erklären kann ich es nicht (zumindest glaube ich nicht, das meine Erklärung richtig wäre).

Das Problem hatte ich auch mal ... schon länger her :)
 
Also, ich würde sagen, es liegt daran, dass divs Blockelemente sind, d.h. du kannst in einer Zeile nur ein div benutzen und alles was in dem html-code NACH dem div kommt, wird in die nächste Zeile verfrachtet...
Da das nun für einige Strukturen unpraktisch ist, gibt es float, der aus dem div sowas wie ein inline-Element macht, welches es ermöglicht, nachfolgende Elemente in der gleichen Zeile anzeigen zu lassen....

Schauen wir uns nun mal deinen code an:

Code: 
#main {
width: 250px;
float: left;
background-color: #FF8C00;
}
Zum Vergrößern anklicken....

Dieses Element lässt es zu, nachfolgende Elemente in der gleichen Zeile anzuzeigen.

Code: 
#middle {
width: 400px;
background-color: #DAA520;
}
Zum Vergrößern anklicken....

Dieses Element ist ein Block-Element (da es ein div OHNE float o.Ä. ist) und lässt keine nachfolgenden Elemente in der gleichen Zeile zu.

Code: 
#side {
width: 250px;
float: right;
background-color: #DCDCDC;
}
Zum Vergrößern anklicken....

Da der Vorgänger von diesem Element ein Block-Element ist, muss es in die nächste Zeile Springen, und richtet sich an der rechten Seite des Fensters (float: rigth; ) aus.

Anmerkung: Ich würde versuchen, das Ändern der Reihenfolge zu vermeiden, da das später zu Problemen führen könnte ...

grüße Rich :p
 
Zuletzt bearbeitet:
@iAmRich:
Dem würde ich mich anschließen.
Wenn Pojan aber das eine DIV zentriert darstellen will, dann kenne ich keine andere Lösung.
Außer natürlich die HTML-Struktur ganz anders anzugehen ;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück