Div Tags nebeneinander

[ToBe4minimal]

Hallo,

folgendes, ich erstelle gerade für ein Schulprojekt eine Website.

Ich mach das zum ersten mal mit CSS, da ich bislang nur Website mit Tabellen gemacht habe.

Jetzt eine Frage:
Ich möchte gerne 3 Bereiche gliedern, einmal für den Bereich der Buttons links, einmal für den Main und Inhalt Bereich der Seiten in der Mitte, und einmal rechts noch für ein Background Image und als Platzhalter, um den Bereich in der Mitte für den Inhalt einzugrenzen.

Dabei soll die Aufteilung der Breite jeweils folgende sein:
Div Tag Buttons (20%), Main (70%), Main_right (10%).

Ich habe das jetzt auch soweit hinbekommen, aber ich weiss nicht was man in CSS definieren soll damit die Div Tags nebeneinander auf einer Höhe abgebildet werden. Eben so wie in einer Tabelle.

So sieht es jetzt aus:

Screenshot aus Dreamweaver

css.JPG (40.97 KiB) 610-mal betrachtet

Man sieht das der nachfolgende Div Tag immer erst dann beginnt, wenn der andere endet.

Wie mache ich es aber das sie nebeneinander auf einer Höhe liegen??
Die Breite dafür ist ja wie man sehen kann richtig gewählt, von daher müsste das doch irgendwie passen.



Liebe Grüße
Tobi

[Azra]

Elemente Positionieren mit dem Attribut Float & Auflösen mit clearfix.
Float ist ein CSS Attribut um Elemente zu positionieren.
Um das Ziel zu verstehen blicken wir zurück in den Bereich Printdesign. In einem Druck-Layout umfließt der Text meist ein Bild.
http://wiki.scribus.net/wiki/images/b/b5/TextUmfliesstRahmen.png

Im Bereich Webdesign, reagieren Elemente mit dem Attribut float ähnlich wie die Bilder im Druck-Layout. Ein Element mit diesem Attribut wird also umflossen und gehört darüber hinaus nach wie vor zum “Fluss“ der Webseite, nicht wie absolut positionierte Elemente, welche sich am Elternelement orientieren und andere Elemente überlagern.
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Das Attribut
Float besitzt die 4 gültigen Werte left, right, inherit und none. Die Verwendung in CSS sieht wie folgt aus:

Code: Alles auswählen

#element{float: left;}

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Das Float “clearen“
Clear besitzt 4 gültige Werte left, right, both und none. Hierbei ist both die am meisten genutzte Variante, da dieser Wert floats von beiden Richtungen auflöst.
- - - - - - - - - - - - - - - - - - - - - - - - - - -

Du möchtest also 3 Container (div) nebeneinander "fließen" lassen:
HTML

Code: Alles auswählen

<div id="tag_buttons"></div>
<div id="main"></div>
<div id="main_right"></div>
<div class="clear"></div>


CSS

Code: Alles auswählen

#tag_buttons, #main, #main_right{float:left;}
.clear{clear:both;}


Das ist zu Beginn die einfachse Variante.