[CSS] Outer DIV moet meegroeien met inner DIVs - hoe?

[Verwijderd]

Hieronder de situatie uitgebeeld:



De outerdiv heeft een background-image: y-repeat. Ik wil dus graag dat de outerdiv meegroeid zodra één van de innerdivs langer wordt dan de outerdiv. Het geval nu is echter zo dat zodra een innerdiv groter wordt qua height dan de outerdiv, hij de 'height' borders van de outerdiv overstijgd.

De CSS code (heb de namen ff aangepast aan het voorbeeld).

code:

#outerdiv
{
    background-image: url(/images/framework/container_home_bg_gradient.jpg);
    background-repeat: no-repeat;
    height: 425px;
}

/* Extra voor nonIE browsers, omdat IE niet fatsoenlijk "min-height" kan parsen. */
html>body #outerdiv
{
    height: auto;
    min-height: 425px
}

#inner_div_left
{
    width: 395px;
    float: left;
}

#inner_div_right
{
    width: 218px;
    float: left;
}

Zodra ik de twee div's ten opzicht van elkaar wil positioneren mbv 'float' groeit de outerdiv niet mee. Haal ik 'float' weg, dan worden ze natuurlijk niet meer goed ten opzichte van elkaar gepositioneerd (maar groeid de outerdiv wel fatsoenlijk mee).

Als ik met margins ga werken, bijvoorbeeld:

code:

#inner_div_left
{
    width: 395px;
}

#inner_div_right
{
    width: 218px;
    margin-left: 395px;
}

Werkt ook niet goed omdat de right div onder de left div wordt geplaatst en de right div dan dus niet meer netjes bovenin begint. Ook bij het gebruik van position: absolute; groeide de outerdiv niet mee.

Ik zie waarschijnlijk een supersimpele functie over het hoofd volgens mij. Iemand die me hiermee kan helpen? Thx!

[dominic]

Floating divs leiden vaak tot problemen. Voeg de volgende CSS regels toe aan de stijl van de outer div zodat je class er zo uitziet:

code:

#outerdiv
{
    background-image: url(/images/framework/container_home_bg_gradient.jpg);
    background-repeat: no-repeat;
    height: 425px;

    overflow: hidden;
    _height: 0;
    _overflow: visible;
}

[Verwijderd]

Ik zag die "_" oplossing ook al toen ik op zoek was naar het probleem dat IE "min-height" niet goed ondersteund. Wat is daar precies de bedoeling van? Want het is geen valid CSS afaik.

[dominic]

Verwijderd schreef op zondag 09 maart 2008 @ 21:40:
Ik zag die "_" oplossing ook al toen ik op zoek was naar het probleem dat IE "min-height" niet goed ondersteund. Wat is daar precies de bedoeling van? Want het is geen valid CSS afaik.

Dit zijn 'hacks' om het goed te laten werken. Er is nl. nauwelijks nog een browser beschikbaar die zich netjes aan standaarden houdt.

De min-height attribuut houd ik mij over het algemeen verre van en ik definieer per browser (Meestal IE, FF en Safari) altijd een aparte stylesheet zodat je in iedere browser 100% hetzelfde te zien krijgt.

[Verwijderd]

Ik had door dat 't een hack was, maar wat is het verschil tussen "height" en "_height"?

Welke browser doet er wat mee? Want zoals je zegt: ik kan beter de zaak per browser gaan definieren.

[Pkunk]

Verwijderd schreef op zondag 09 maart 2008 @ 21:59:
Ik had door dat 't een hack was, maar wat is het verschil tussen "height" en "_height"?

Welke browser doet er wat mee? Want zoals je zegt: ik kan beter de zaak per browser gaan definieren.

ie6 (7 ook?) negeert die _ gewoon en ziet het als normale height

[dominic]

Timlog schreef op zondag 09 maart 2008 @ 22:00:
[...]

ie6 (7 ook?) negeert die _ gewoon en ziet het als normale height

Yep, 7 negeert 'm ook.

[Verwijderd]

Ok, duidelijk, thx!

Ik zit echter nu nog met het probleem hoe ik m'n inner divs ten opzichte van elkaar moet positioneren. Want zodra ik "float: left;" gebruik, groeit de outer div niet mee. En met margins werken gaat ook niet zoals ik in m'n TS gepost heb. Hoe fix ik dat?

[dominic]

Verwijderd schreef op zondag 09 maart 2008 @ 22:06:
Ok, duidelijk, thx!

Ik zit echter nu nog met het probleem hoe ik m'n inner divs ten opzichte van elkaar moet positioneren. Want zodra ik "float: left;" gebruik, groeit de outer div niet mee. En met margins werken gaat ook niet zoals ik in m'n TS gepost heb. Hoe fix ik dat?

Dat zou dus moeten werken (iig in Firefox) met de 3 regels die je aan de outer div class moet toevoegen. Voeg die 3 regels dus toe aan de class die in Firefox gebruikt wordt.

In IE: Haal de height in px weg en maak daar 'auto' van.

[Verwijderd]

Top, thx! dat werkt inderdaad. Fijn!

Enigszins offtopic: heb jij nog een tip welke browser sniffer ik het beste kan gebruiken? Er is namelijk een wildgroei aan scripts daarvoor te vinden.

[crisp]

Verwijderd schreef op zondag 09 maart 2008 @ 22:27:
Top, thx! dat werkt inderdaad. Fijn!

Enigszins offtopic: heb jij nog een tip welke browser sniffer ik het beste kan gebruiken? Er is namelijk een wildgroei aan scripts daarvoor te vinden.

Conditional comments gebruiken voor IE. JS browser-sniffing is onbetrouwbaar.

[Pkunk]

crisp schreef op zondag 09 maart 2008 @ 23:21:
[...]

Conditional comments gebruiken voor IE. JS browser-sniffing is onbetrouwbaar.

Is dat zo? Waarom dan? Ik heb er namelijk nooit problemen mee.

[crisp]

Timlog schreef op maandag 10 maart 2008 @ 08:56:
[...]

Is dat zo? Waarom dan? Ik heb er namelijk nooit problemen mee.

Ik heb het nagenoeg nooit nodig

Sowieso is het onlogisch om javascript te gebruiken om conditioneel iets met CSS te doen. Verder is user-agent eenvoudig aan te passen in diverse browsers en je loopt dus het risico dat je een verkeerde browser detecteert en vervolgens iets doet in je code dat niet ondersteund wordt. En verder is een browser-sniff op UA niet forwards-compatible.

Als je bijvoorbeeld wilt weten of een browser native XMLHttpRequest ondersteund dan ga je niet kijken of de browser IE6 of lager is maar check je gewoon of window.XMLHttpRequest bestaat.

Voor CSS kan je zoals gezegd conditional comments gebruiken om specifiek voor IE een extra stylesheet in te laden waar je je 'hacks' in zet. Zo weet je zeker dat je daar geen andere browser mee lastig valt en kan je je standaard stylesheet 'clean' houden.

[Pkunk]

Excuses dat het een beetje off-topic gaat, maar ik ben erg nieuwsgierig

crisp schreef op maandag 10 maart 2008 @ 09:46:
Ik heb het nagenoeg nooit nodig

Sowieso is het onlogisch om javascript te gebruiken om conditioneel iets met CSS te doen. Verder is user-agent eenvoudig aan te passen in diverse browsers en je loopt dus het risico dat je een verkeerde browser detecteert en vervolgens iets doet in je code dat niet ondersteund wordt. En verder is een browser-sniff op UA niet forwards-compatible.

In bijna elke website die ik maak op m´n werk zit standaard een tooltje dat de browser in een classname op je html zet. Dat werkt er prettig en geeft overzichtelijk css: ".ie6 .andere-classname". Dit heeft nog nooit niet gewerkt voor zover ik vernomen heb. Misschien dat mensen hun user agent zelf aanpassen, maar in wat vor soort situatie zou je dat doen?

En over de forward-compatibility. Die is toch al bijna niet meer nodig? Ik merk eigenlijk steeds meer dat goede html/css er op de nieuwste browsers er toch hetzelfde uitziet. Zoniet, dan is het eigenlijk altijd zo te maken.

Als je bijvoorbeeld wilt weten of een browser native XMLHttpRequest ondersteund dan ga je niet kijken of de browser IE6 of lager is maar check je gewoon of window.XMLHttpRequest bestaat.

Voor CSS kan je zoals gezegd conditional comments gebruiken om specifiek voor IE een extra stylesheet in te laden waar je je 'hacks' in zet. Zo weet je zeker dat je daar geen andere browser mee lastig valt en kan je je standaard stylesheet 'clean' houden.

Voor javascript geld dat sowiso, maar voor css zijn er soms toch situtaties dat je verschillen hebt tussen bv firefox en opera of safari. Ja, dan is er waarschijnlijk geen nette html/css geschreven (want zie voorgaande stukje), maar als je in de situatie zit dat er even snel een quickfix moet gebeuren is het erg fijn om even snel .ff of .webkit in je css te kunnen zetten. Als je die toch in de html hebt staan als classname. Daarbij heb je meteen alle css van bepaalde elementen op dezelfde plek staan. Dat is fijn qua onderhoudbaarheid. Helemaal in grotere projecten met meerdere mensen.
Daarbij zijn er nog de uitzonderingen zoals display:inline-block wat niet door ff2 ondersteunt word en je voor ff -moz moet gaan gebruiken.

Punt is dat ik een vergelijking probeer te maken tussen de risico's die je loopt door js sniffing te gebruiken t.o.v. de gemakken.

[crisp]

Timlog schreef op maandag 10 maart 2008 @ 15:23:
Excuses dat het een beetje off-topic gaat, maar ik ben erg nieuwsgierig

[...]

Punt is dat ik een vergelijking probeer te maken tussen de risico's die je loopt door js sniffing te gebruiken t.o.v. de gemakken.

Wat doe je als een client geen javascript ondersteund (of uit heeft staan), krijgt die dan mogelijk een brakke layout?

In mijn ervaring is het eigenlijk enkel IE waar je echt seperate stylerules voor nodig hebt en valt het met de verschillen tussen de andere browsers dusdanig mee dat daar altijd wel een workaround te vinden is waardoor je met dezelfde CSS hetzelfde effect bereikt in al die browsers.

De afhankelijkheid van javascript is wat mij eigenlijk het meest tegenstaat aan een dergelijke oplossing buiten de onbetrouwbaarheid (wij slaan de UA-string op bij ingelogde sessies en je wilt niet weten wat voor gekke dingen we daar soms tegenkomen, van 'Googlebot' tot 'IE1000').

[Makkelijk]

Ik zie inderdaad niet het voordeel van een JS oplossing. Conditional comments werkt ontzettend prima. Ik laad altijd eerst standaard stylesheet, daarna ga ik een IE6 en 7 stylesheet laden en override ik elementen totdat het goed is

Het enige ding waar ik weleens tegen aanloop met firefox vs. opera & safari is, zoals in dit topic genoemd, floatende divs. Dat los je dan op met clear.. VVV

Ontopic:
Het komt doordat je float gebruikt, firefox laat de div waar deze in staan dan niet meegroeien met de floating divs.

Is op te lossen door na de floating divs een lege div te maken met als eigenschap clear: both;
Ik doe het echter zo:

code:

#innerdiv_right:after {
  clear: both
}

dit moet je dan wel doen bij de laatste div in die outer-div. Anders floaten je divs niet meer naast elkaar.

In jou plaatje vind ik het alleen wat handiger om de outer div position: relative te geven en de innerdiv's position: absolute en ze dan gewoon met top, left en right te positioneren.

[ Voor 44% gewijzigd door Makkelijk op 10-03-2008 21:02 ]

[crisp]

Makkelijk schreef op maandag 10 maart 2008 @ 20:55:
[...]
In jou plaatje vind ik het alleen wat handiger om de outer div position: relative te geven en de innerdiv's position: absolute en ze dan gewoon met top, left en right te positioneren.

Dan haal je ze dus helemaal uit de flow en heb je geen enkele manier meer om de 'outer' div mee te laten rekken...