Relativ komplexes DIV-Vorhaben

[Gauner]

Hallo!

Könnte mir jemand dabei helfen oder, noch besser, zeigen, wie ich so eine DIV-Struktur (siehe Anhang) hinbekomme?

Bei mir hapern alle Wege, vor allem bei Div4. Dieses nimmt entweder die Position von Div7 ein, oder verschwindet hinter Div1.

In Sachen HTML & CSS bin ich relativ fit, jedoch komme ich mit den Floats einfach nicht klar :(

 

[MrMurphy]

Hallo,

und was hast du sonst noch für Anforderungen?

Gruss

MrMurphy

 

[Tronjer]

Wrappe die Divs doch in Container.

Container 1 = div1, div 7
Container 2 = div2, div3
Container 3 = div5, div6
Container 4 = Container 2, div4, Container 3, div8
Container 5 = Container 1, Container 4

CSS:
Container 1, Container 3, div2, div3, div5, div6 bekommen float:left
Container 4 und Container 5 bekommen die Klasse clearfix (googeln)

Ist jetzt natürlich ungetestet.

 

[MrMurphy]

Hallo,

wenn das alle Anforderungen sind würde ich einfach alle Container nach links floaten, passende Breiten und Höhen vergeben, eine Prise clear und alles ist stabil und gut:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_14_gauner_01_float_problem.html

Gruss

MrMurphy

 

[djheke]

Na, ich glaube ja die Div's sollen später variable Höhen haben. Mann darf auf die nächste Frage gespannt sein. Wenn nicht dann bitte em als Maßeinheit wür height.

 

[Gauner]

Hallo und vielen Dank für eure Hilfe!

Das mit dem durchgehenden Left-Float hab ich mir zu eigen gemacht. Habe mit einem umschließenden DIV die Formatierung quasi erzwungen. Damit bin ich recht zufrieden.

Mein Ergebnis:

<!-- umschließender DIV--><div style="width: 974px; background: #FFF; margin: auto; padding: 25px;">

<div style="height: 90px; width: 120px; float: left;">Div1</div>
<div style="height: 20px;  width: 734px; float: left;">Div2</div>
<div style="height: 20px;  width: 120px; float: left;">Div3</div>
<div style="height: 20px;  width: 854px; float: left;">Div4</div>
<div style="height: 50px;  width: 734px; float: left;">Div5</div>
<div style="height: 50px;  width: 120px; float: left;">Div6</div>
<div style="height: 20px;  width: 120px; float: left;">Div7</div>
<div style="height: 20px;  width: 854px; float: left;">Div8</div>

<!--Clear-Dummy--><div style="clear:left;"></div>

<!--abschließender DIV--></div>

@Tronjer: Wie würde das mit deinem Code denn aussehen?

 

[Tronjer]

Eine logische Hierachie. Du könntest bsw. div1 + div7 in einen gemeinsamen Container packen und die restlichen Divs in einen zweiten. Die beiden Container werden gefloatet. Innerhalb des zweiten Containers werden erst alle Divs gefloatet und danach erhalten div4 und div8 ein clear.

Ich würde es aber so nicht machen, sondern statt dessen ein Gridbasiertes Framewok nehmen.

 

[Gauner]

Also das mit "Div1 + Div7 gemeinsam" (gute Idee) und das clearen mit Div8 verstehe ich, aber wie kommste beim clearen auf Div4? Das würde sich doch unter Div1 (bzw wenn gemeinsam unter Div8) einreihen?

 

[Tronjer]

Nö, div4 liegt innerhalb des rechten Containers und dort unter div2 + div3.