verschachtelte Boxen und deren Größen

[thomas1977]

Hallo,

ich habe ein Grunddesign für eine HP im Kopf, dass wie folgt aussieht :CSS + HTML


Da natürlich auf jeder Seite der Content mal mehr mal weniger ist, kann ich keine feste Höhe vorgeben. Der Content soll also seine umschließenden Boxen bis auf seine Größe ausdehnen. Die Umschließenden Boxen haben eine andere Hintergrundfarbe und gestallten damit den Content links und rechts (in diesem fall grau). Sobald ich float:right auf den Content mache, zeigt mir Opera das nicht mehr wie gewünscht an. Der Content geht über die umschließende Box, ohne sie auszudehnen. Der Hintergrund der umschließenden Boxen fehlt damit. Auch mit overflow kann ich da nichts reißen.

Im IE sieht die Sache auch noch nicht so toll aus. Ich hoffe ich konnte mein Problem verständlich rüber bringen.

Sehe gerade noch etwas : Lasse ich den Doctype weg, funktionert es zumindest im Opera wie gewollt. Kann mir irgednwer helfen, diese Idee IE/Opera/Firefox tauglich zu realisieren? Ich verzweifel hier gerade.Was mache ich falsch. Bin für jeden Ratschlag zu haben.

Danke
Tom

 

[Efchen]

Wer float sagt, muss auch clear sagen! Gefloatete Elemente sind nicht mehr im Textfluss und vergrößern somit auch nicht mehr die Elternelemente.

Im übrigen würde ich CONTENT gar nicht right floaten, sondern nur NAVI links.

Und ich würde meinen Inhalt semantisch sinnvoll auszeichnen und keine div-Suppe kochen.

Und wenn Du den Doctype weglässt, hast Du keine Garantie mehr, dass alle Browser im Standards Mode arbeiten, zumindest der IE schaltet dann in den Quirks Mode, was Darstellungsunterschiede bedeutet, denn der IE kennt in dem Modus ein falsches Box Model. Ein Doctype, der alle Browser in den Standards Mode schaltet, ist unbedingt notwendig (wenn der Browser sich nicht sogar in seinem Quirks Mode wie im Standards Mode verhält).

Gruß,
-Efchen

 

[thomas1977]

"Wer floatet muss auch Clearen" hab ich auch schonmal gelesen :). Dachte eigentlich, dass ich dass befolgt hätte ( siehe footer -> clear:both). Oder wo muss ich da clearen? Habe nun wie vorgeschlagen das float right weggelassen und den CONTENT mit margin-left verschoben. Oder wie meintest du das? Mit position:absolute und right:0px kriege ich das nicht hin. Nun funktioniert es sogar wie ich es mir vorstelle siehe Seite2 und CSS Nr. 2.
Musste die Hintergrundfarbe für den Container ändern, da der IE kein "grey" kennt.

Dir schmeckt meine Div-Suppe also nicht? Wüsste garnicht, wie ich das anders gestallten sollte :( Das ein Doctype vorgegeben sein muss war schon klar. Meine Anmerkung sollte nur als evtl. Hilfe mit eingebracht werden. Je mehr ich vorab feststellen kann desto weniger müsst ihr probieren und könnt mir schneller zur Hand gehen.

Manchmal ist es echt merkwürdig, wie man vor den simpelsten Problemen wie die Maus vor der Schlange steht und stundenlang erfolglos rumsitzt. Kurz frishe Luft geschnappt, was gegessen, deine Antwort gelesen und die Welt ist wieder fast heile.

Gruß
Tom

 

[Efchen]

"Wer floatet muss auch Clearen" hab ich auch schonmal gelesen :). Dachte eigentlich, dass ich dass befolgt hätte ( siehe footer -> clear:both).

Ich hatte nicht in den Code geschaut, nur was Du beschrieben hast, hörte sich ganz typisch danach an. :-)

Habe nun wie vorgeschlagen das float right weggelassen und den CONTENT mit margin-left verschoben. Oder wie meintest du das?

Genau so meinte ich das!

Mit position:absolute und right:0px kriege ich das nicht hin.

position:absolute ist auch um einiges schwieriger als float. Würde ich nur benutzen, wenn ich genau wüsste, was ich tue.

Dir schmeckt meine Div-Suppe also nicht? Wüsste garnicht, wie ich das anders gestallten sollte

Du sollst in HTML ja auch nicht "gestalten", sondern "auszeichnen". Semantisch.
Erst der Inhalt.
Dann das HTML, den Inhalt auszeichnen, ihm eine Bedeutung geben.
Dann erst CSS mit Layout+Design.

Schönen Abend,
-Efchen