Div höhenanpassung in layout

[fabio]

halli hallo

überall wird seit neustem ja angepriesen, für gestaltung des layouts sollte man nicht tabellen nehmen, sondern DIV elemente.

okey, jetzt hab ich gedacht, mache ich die nächste homepage von mir auch mal mit DIVs, und nciht tabelle.

fertig sollte das gerüst dann so aussehen
http://terra1.deaggi.net/upload/1123979989.png

nun stehe ich bereits vor dem ersten problem
die höhe der div 2-5 sind je nach seiteninhalt (div3) unterschiedlich gross.
wie bekomm ich nun aber 2,4,5 dazu, dass die auch so gross werden, wie für sie möglihch?

also das mit viel inhalt nicht nur der DIV 3 höher wird, sondern 2,4,5 gleichzeitig auch höher.


weil irgendwie komm ich da nicht weiter.

ich könnte das ganze relativ einfach mit einer tabelle lösen, aber weil überall die DIVs hochgelobt werden, will ich mal mit denen probieren.

danke

PS:
fertig wird es dann etwa so aussehen
http://terra1.deaggi.net/upload/1123817171.png
http://terra1.deaggi.net/upload/1123940735.png
http://terra1.deaggi.net/upload/1123952156.png
und wenn wir gerade dabei sind, wie findet ihr das design, was könnte ich noch verbessern?
thanks

[derHund]

Re: Div höhenanpassung in layout

das, was du möchtest, geht nicht. aber: such mal nach faux columns.

[fabio]

okey, ich glaub ich habe verstanden wie.

http://terra1.deaggi.net/upload/1124015948.png

also ein div machen, in welchem die div 2,3,4,5 verschachtelt sind.
und bei diesem "überdiv" das hintergrundbild machen, welches ein ausschnitt von den 4divs zusammen ist.
also einen teil direkt über dem div6.

dass dann in div2 und div5 nur das bild drin, normal als <img>, und in div4 normal die navi.

danke, klingt nach einem guten workaround.

funktioniert der bei allen browsern?

und wird man in CSS3 dann endlich das ohne workaround machen?
danke für den tipp.

[derHund]

dass dann in div2 und div5 nur das bild drin, normal als <img>, und in div4 normal die navi.

nö, so nicht. div 2 und 5 waren vorhin schon unnötig. img zu verwenden, um elemente des design darzustellen, ist falsch und unnötig. dafür hast du die css.

funktioniert der bei allen browsern?

ja, ... solltest du aber ein sich wiederholendes hintergrund-bild verwenden, mußt du aufpassen, es nicht zu klein zu wählen. manche browser bringt das leicht aus dem tritt (opera x.x), eigene test sind da wohl angebracht. generell ist da aber nichts gegen zu sagen.

und wird man in CSS3 dann endlich das ohne workaround machen?

warum ist das wichtig? der am stärkstens verbreitete browser unterstützt in seiner neuesten version nicht mal css1/2 vollständig. meinst du, wir werden eine funktionierende css3-implementation im ie noch erleben?

[fabio]

ich hoffe doch.


egal.

also, ich bin nun auf ein weiteres problem gestossen.

angenommen, ich habe einen <div>1 container.
in diesem div hab ich wiederum zwei divs (div2,div3) nebeneinander, der eine (div2) ist 160px hoch, der andere (div3) ist etwa 400px hoch.
müsste der erste div, welcher ja "parent" der beiden anderen div nicht auch seine grösse anpassen? also das er dann auch 400px hat.

weil ich glaube zumindest das mit den faux columns verstanden zu haben.
irgendwie funktionierts auch, aber eben nur beim IE

schaut mal das im IE und im FF an
http://www.designeroutlet.ch/blog/layout.htm

hier n div layout übersicht
http://terra1.deaggi.net/upload/1124073154.png
also, div2 ist der wichtige teil.
das hintergrundbild vom div2 ist der gelbestreifen, der sich y-mässig wiederholt.
in div2 sind div4,5,6 verschachtelt.
wie zu erkennen ist, ist div5 der höchste von denen.
der div2 passt also seine höhe an, und alle sind glücklich.

eben, im IE funktioniert das auch alles toll.

nur im FF stimmt etwas nicht (resp am quellcode nicht).
und zwar zeigt der FF div 4,5,6 in der richtigen höhe und so dar.
nur der div2, also der div-container in welchem 4,5,6 drin sind, passt sich in der höhe nicht an.
sprich der bleibt die ganze zeit vielleicht ein paar pixel hoch, und die drin verschachtelten divs lappen einfach über.
und weil sich der footer (div3) nach dem div2 richtet, ist der auch völlig nach oben verschoben.


wahrscheinlich ist es nur ein einziges attribut, welches ich im CSS zum div2 anhängen muss, dass der seine höhe nach seinem inhalt anpasst.

bloss, wie mach ich das.

bin langsam am verzweifeln.

daaank