[css] kolommen laten meerekken met de inhoud

[Pendaco]

Heey mensen,

Ik ben bezig met een website maar kom er op een bepaald punt niet helemaal uit

Allereerst onderstaand voorbeeld (online) om even het 1 en ander duidelijk te maken;
testcase_meerekken (let niet op de mooie kleurtjes )


Zoals jullie dus zien wil ik er voor zorgen dat wanneer er in het middelste gedeelte meer tekst wordt gebruikt dan de standaardhoogte, de rest van de 4 middelste kolommen automatisch meerekt.

De 2 buitenste kolommen hebben een afb in de achtergrond, en in de 2 middelste kolommen komt tekst.
Ik heb al geprobeerd om procenten op te geven maar dat wil niet echt werken (had ik ook wel een beetje verwacht maargoed).

Ook heb ik die 4 kolommen in een extra container <div> gezet om te zorgen dat dat handeltje bij elkaar blijft maar ook daar zit ik vast.

Heeft iemand een oplossing, of een andere methode? Want ik krijg mn probleem namelijk niet echt gevonden met google of ander zoekprogramma.
Of mocht iemand een link hebben wat mijn probleem (+oplossing) beschrijft, dan graag.

---

vernieuwde pagina (met faux columns) zie ook een paar posts naar onder

[ Voor 10% gewijzigd door Pendaco op 09-06-2006 17:51 ]

[Dennahz]

Je moet geen height, maar min-height gebruiken.

code:

//height: 100px;

Voor IE... FF en andere browsers negeren die //, maar IE ziet height als min-height.

Dus dan krijg je zoeits

code:

div#hok1
{
   min-height: 400px;
   //height: 400px;
}

Try it, it works Netjes is anders, maar IE is een rotbrowser met slechte CSS support.

[ Voor 38% gewijzigd door Dennahz op 08-06-2006 20:05 ]

[JHS]

Dennahz: Ik zou alleen geen hack gebruiken, maar conditional comments .

Daarnaast heeft dit volgens mij niet zoveel te maken met min-height, maar met het clearen van floats . Zie ook deze testcase.

[Pendaco]

Helaas blijf ik met die min-height nog steeds hetzelfde probleem houden dat de rest van de kolommen niet meerekken, en ik vind hacks ook eerlijk gezegt niet zo heel mooi staan

@ JHS

thnx voor de link, ik ga daar eens even mee stoeien.
En mocht ik er niet uitkomen dan horen jullie het wel

[Verwijderd]

Door de float haal je die div uit de flow en rekt z'n parent dus niet mee. Je float clearen zou inderdaad de oplossing kunnen zijn

[Pendaco]

Ik kom er nog steeds niet uit

Ik heb t voorbeeld van jhs bekeken en geprobeerd toe te passen op mijn ding maar t wil niet echt lukken.

Ik weet ook niet of t helemaal duidelijk is dat ik dus niet alleen die container wil laten meerekken
maar ook die 3 andere kolommen (dus de 2 buitenkanten met afbeeldingen, en de kolom naast de kolom met tekst).


Edit:

Oke ik ben toch maar met faux columns aan de slag gegaan
mbv deze website

Probleem is alleen dat ik de nu 3 kolommen binnen de wrapper (met de afb) niet goed
gepositioneerd krijg. (de groene kolom staat op de goede plek maar de grijze hoort daar weer bovenaan naast te staan en de rode hoort helemaal rechts bovenaan te staan)

Ook wil ik dat de hoogte van alle kolommen Altijd minimaal 450px is, ongeacht of er text in staat of niet.

Klik hier voor de link

Ziet iemand wat ik fout doe? Dit begint er iig al wel op te lijken maar nog net niet helemaal

[ Voor 48% gewijzigd door Pendaco op 09-06-2006 17:50 ]

[Pendaco]

Niemand die een oplossing heeft voor dit kolom probleempje?

[user109731]

Pendaco schreef op vrijdag 09 juni 2006 @ 16:32:
Probleem is alleen dat ik de nu 3 kolommen binnen de wrapper (met de afb) niet goed
gepositioneerd krijg. (de groene kolom staat op de goede plek maar de grijze hoort daar weer bovenaan naast te staan en de rode hoort helemaal rechts bovenaan te staan)

Ook wil ik dat de hoogte van alle kolommen Altijd minimaal 450px is, ongeacht of er text in staat of niet.

De 3 divs die naast elkaar moeten een float:left; geven. Misschien moet je wel eerst wat margins/paddings weghalen.

Wat die minimale hoogte betreft: dit kan met min-height. Dit word door IE niet ondersteund, zodat je voor IE (mbv een conditional comment) een height: 450px; moet instellen

[Verwijderd]

ik heb het zelf voor elkaar gekregen met een extern .js bestand.

function setTall() {
if (document.getElementById) {

var divs = new Array(document.getElementById('links'), document.getElementById('midden'), document.getElementById('rechts'));

var maxHeight = 0;
for (var i = 0; i < divs.length; i++) {
if (divs[i].offsetHeight > maxHeight) maxHeight = divs[i].offsetHeight;
}

for (var i = 0; i < divs.length; i++) {
divs[i].style.height = maxHeight + 'px';

if (divs[i].offsetHeight > maxHeight) {
divs[i].style.height = (maxHeight - (divs[i].offsetHeight - maxHeight)) + 'px';
}
}
}
}

window.onload = function() {
setTall();
}

window.onresize = function() {
setTall();
}

*links *midden en *rechts even wijzigen , en het werkt

maar dit is denk ik niet de manier hoe jullie het graag zouden willen.

[Rowanov]

Pendaco schreef op vrijdag 09 juni 2006 @ 16:32:
Ook wil ik dat de hoogte van alle kolommen Altijd minimaal 450px is, ongeacht of er text in staat of niet.

Voor firefox...

Cascading Stylesheet:

.kolom {
  min-height: 450px;
}

...en voor IE een fijne conditional comment (in je html pagina zetten )! IE behandelt height alszijnde min-height.

Cascading Stylesheet:

<!--[if IE]>
<style type="text/css">
.kolom {
  height: 450px;
}
</style>
<![endif]-->

Dan nu die hele load aan javascript overboord kieperen, voor zover je die al geprobeerd hebt

[Pendaco]

Jooo alledrie bedankt voor jullie reactie.

Javascript is idd niet mijn favoriete oplossing maar mocht t echt niet anders kunnen dan zal ik er wel aan moeten geloven .

T is nu een beetje laat dus ik ga er morgen verder aan knutselen.

Even kijken of t met floats en min hights nu wel werkt. T waren dus eerst wel floats maar volgens mij stond t toen nog steeds niet helemaal goed.

Maargoed ik zal hier mn resultaten posten, iig bedankt

[Pendaco]

Ooke het is gelukt nu (let even niet op de footer die moet ik nog even aanpassen).

T enige vage probleem is nu dat in Firefox opeens de achtergrond van het midden gedeelte (wat in de wrapper staat) niet wordt weergegeven

Deze is na een aantal wijzigingen (van de kolommen die in de wrapper staan) opeens verdwenen zo lijkt het. En het is me nog niet gelukt om die terug te krijgen.

Iemand enig idee waar m dit in kan zitten?

[Rowanov]

Waarschijnlijk float je dingen in de wrapper; overflow: auto; op de wrapper kan helpen.

[user109731]

Volgens mij gewoon een clearing floats probleempje? Zie ook deze testcase van JHS, in dit topic overigens al eerder aangehaald

[Pendaco]

Aaahh dat was m dus, beiden bedankt , overflow:auto wilde niet lekker werken, in firefox stond opeens die hele wrapper naast de site.

Maar met een <br> clear:both, werkt het perfect.

Wat moest ik toch beginnen zonder mn lieve mede tweakertjes

[Rowanov]

Overflow: auto; is in 99% van de gevallen een prima manier om floats te clearen, maar soms werkt het om misterieuze redenen niet