CSS 2 "Boxen" nebereinander bringen

[xSeppelx]

Hi,

ich hab ein Problem und bevor ich "hackstückele" frage ich lieber erst mal nach besseren Lösungen

Hier mal der derzeitige Status:


Wie man sieht gibt es 4 schöne gefüllte(sinnlos gefüllte) Contentboxen, die auch schön "links" angeordnet sind.
Doch weiter unten... eine Box die rechts angeordnet ist und das soweit auch ganz gut... aber eben nicht Parallel oben bei der ersten "linken" Contentbox anfängt.

Ich denke wenn man die Seite sieht wird klar was das Problem ist(einfach runterscrollen).

Da alles nur HTML und CSS brauche ich ja keinen Code zu posten.
Sollten euch andere Probleme auftauchen bitte auch gleich melden, denn ich nutze Firefox 3.6.6 und hab eine Auflösung von 1920*1080.

Also mir fällt derzeit einfach nicht ein wie ich die nebeneinader kriege.
Das Problem ist denke ich dass ich beide Sektionen(Seiten) in einem Div anordner(um den grauen Hintergrund zu bekommen).

 

[el dios]

hi,
am einfachsten wäre es wenn du um die div-container content_head, content_text und content_foot einen weiteren div-container legst, dem du in der css-datei das attribut "width:400px;" gibst und dann halt den benötigten wert einträgst.
gruß eL dios

 

[Mr. Snoot]

Stichwort float.

Damit erreichst du, dass ein Element ein anderes "umfließen" kann.


Notierst du zwei divs im Quellcode, werden diese untereinander ausgegeben; mit einem float:left beim ersten div erreichst du, dass das zweite div neben das erste rutscht.

 

[Maysi2k]

das geht nicht so einfach,

da musst du mit float:left; und float:right; arbeiten, und direkt nach der box "<div style="clear:both;"></div>" anwenden, dann sind die nebeneinander.

 

[TigerLeon]

Plaziere die rechte Box im Quellcode über die linken Boxen und gebe ihr float:right

Die beste Lösung ist aber, die linken Boxen alle in einen Div zu packen und nur dieses div links floaten. Die rechte Box/en würde ich auch in einen div packen und auch links oder rechts floaten.

 

[xSeppelx]

Hi,
über soetwas habe ich auch nachgedacht, aber ich will Barrierefreiheit
Und richtig funktionieren tut das leider auch nicht...
Dann werden die Boxen nur verzogen und sind untereinander alle... bzw. je nach Änderun das alte Bild nur das die Boxen viel zu groß oder zu klein sind.

edit:
Zu langsam, werde die anderen Kommentare erstmal abarbeiten.
Danke schon mal!

edit2:
Also dank Float bin ich meinem Ziel schon mal ein Stück näher gekommen.
Wenn ich nicht mehr weiterkomme melde ich mich wieder

Danke!

 

[TigerLeon]

Zur Barrierefreiheit würde ich noch <h1>, <h2> ... Überschriften verwenden.

 

[xSeppelx]

Du meinst z.B. bei den "Titeln" der Contentboxen?