[CSS] div soll größe des inneren annehmen...

[xJonx]

hi ppl,

vorweg das problem in kurz: ich suche quasi das gegenteil von "height:inherit;"
es geht um folgendes: ich habe eine div struktur wie folgt:

/''''''''''''''''' -div0-''''''''''''''''''''''\
|/'''''''''\/'''''''''''''''\/''''''''\/''''''\|
||         ||               ||       ||       ||
||         ||               ||       ||       ||
|| div1    || div2          || div3  || div4  ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
|\........./\.............../\......./\......./|
\............................................./

nun ist es so, das ich alles divs von 1-4 "height:inherit;" gegeben habe,
sie sich also der höhe des div0 anpassen, was wichtig ist das die divs
2 und 3 eine border haben die den inhalt trennt.

allerdings, und hier kommt das problem, wenn der inhalt eines divs
länger wird, soll das div0 mitwachsend, und dadurch eben auch die
anderen divs... quasi wie einst bei den tabellen, aber derzeit passiert
nur das hier:

/''''''''''''''''' -div0-''''''''''''''''''''''\
|/'''''''''\/'''''''''''''''\/''''''''\/''''''\|
||         ||               ||       ||       ||
||         ||               ||       ||       ||
|| div1    || div2          || div3  || div4  ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
||         ||               ||       ||       ||
|\........./|               |\......./\......./|
\...........|               |................../
            |               |
            \.............../

wie mache ich es nun das die höhe des äusserem div0 sich
der höchsten höhe der inneren divs 1-4 anpasst und dabei
die inhaltlich kleineren div wiederum mit wachsen?

hier beispielhaft der css code mit versuchen:

.div0 {
	width:970px;
	display:block;
	height:435px;
}
.div1, .div2, .div3, .div4 {
	width:339px;
	height:inherit;
	background-color:#FDFDFD;
	display:block;
	float:left;
	border-right:1px solid #D1D1D1;
}

es wäre echt super, wenn mir da jmd weiterhelfen könnte.

grüße,
der jon

[ArSeN]

Probiers mal mit:

overflow: visible;

Hier gibts doku: overflow

[xJonx]

nee, sorry.

was alles nicht geht:

.div0 {
	width:970px;
	display:block;
	min-height:auto;
	overflow:visible;
}

.div0 {
	width:970px;
	display:block;
	min-height:435px;
	overflow:visible;
}

.div0 {
	width:970px;
	display:block;
	height:auto;
	overflow:visible;
}

aber das ist auch nur der anfang

[ArSeN]

In Welchem Browser arbeitest du denn? Im Alten IE ist overflow soweit ich weiß Fehlerhaft.

[xJonx]

ich teste auf mac in FF, Safari und IE sowie auf DOS im FF und IE.

[Koala]

Das ist ein echtes Problem.

Wenn Du nach "3-Spalten-Layout CSS" findest Du zwar Lösungen.

Diese beziehen sich aber auf ein gesamtes (viewport-füllendes) Layout z.B. gibt es hier welche:

http://www.cssplay.co.uk/layouts/3cols.html#

und hier:

http://www.cssplay.co.uk/layouts/index.html


Meines Wissens gibt es für Dein Problem keine CSS-Lösung.

[xJonx]

gibts es den nicht irgend ne trickser rei?
mit minus werten etc?

[Koala]

das mit den Minuswerten bezieht sich auf eine gegebene Auflösung
und ist zudem auch viewportfüllend.

[wahsaga]

Bei flexiblen Breiten wäre das wirkllich ein anspruchsvolles Problem - aber wenn du sowieso überall feste Breiten benutzt, wieso simulierst du dann die Rahmen nicht einfach über ein Hintergrundbild für das umgebende Element ...?

[xJonx]

die sache ist ja eigentlich nicht das problem, wenn man mit festen werten arbeitet.
aber es letztlic darum, das man mit dem tollen vergrößerungsmodus (srtg&+)
die seite vergrößern können soll... und dann läufts halt über...

[ghostgambler]

Such mal nach clearfix und wende das auf den div0 an

[Byteandi]

die sache ist ja eigentlich nicht das problem, wenn man mit festen werten arbeitet.
aber es letztlic darum, das man mit dem tollen vergrößerungsmodus (srtg&+)
die seite vergrößern können soll... und dann läufts halt über...

da du mit pixeln arbeitest, nutzt dir die strg&+ möglichkeit eh nichts, dazu muesstest du schon mit em arbeiten.

wenn du dazu noch möchtest, dass alle boxen immer gleich lang sind, musst du mit absoluten und relativen positionen sowie z-index arbeiten und damit nen bissel rumprobieren.

Die boxen sind dann zwar nicht gleich lang, man kann es aber simulieren, auch mit einer variablen Breite beim benutzen der vergrösserungsoption.

Es wird vermutlich nicht in allen browsern, aber in allen gängigen browsern laufen.

[ArSeN]

Was is denn eigentlich der Zweck von div0?

[xJonx]

also:
ich habe das div0 als rahmen für die gesamte breite
und für das floatings verwendet, da die site horizentral
mittag ist...