[div/css] Kolom met volledige hoogte van container

[oscarvdb]

Ik ben bezig met het realiseren van een layout in XHTML(transitional 1.0) en CSS. Ik heb mezelf beloofd de w3c-richtlijnen te volgen en niet over te stappen naar een table-layout. Dit is wat ik nu heb:



Het 2e menu is simpelweg een float:left met gedefinieerde width en dynamische height; dwz dat deze meegroeit met de inhoud daarvan. De tekst vloeit dus om het linkermenu heen. Waar ik echter naartoe wil, is dat de container met dit menu, dezelfde hoogte als de container heeft, zodat ik dit krijg:



Een simpele div eromheen met 100%height was niet de oplossing. Absolute positioning lijkt me lastig aangezien het stuk beeldscherm dat gebruikt wordt (750px) gecentreerd is en de absolute positie dus bij elke resolutie anders is. Ik wil dus absoluut geen <table> gebruiken om een layout te maken.

Wie heeft een 'nette' oplossing?

[ Voor 3% gewijzigd door oscarvdb op 05-05-2004 11:55 . Reden: toevoeging ]

[faabman]

dit gaat puur om een visueel effect... op www.alistapart.com staat in een artikel beschreven hoe je dit kan realiseren

http://www.alistapart.com/articles/fauxcolumns/

[equationunequal]

lengte van het 2e menu kan je "faken" door het 2e menu en de content in een container te gooien die je de zelfde achtergrondkleur geeft als het 2e menu...

zie www.newskin.nl/Bodyline/index.php voor een voorbeeld...
css: www.newskin.nl/Bodyline/skin/bodyline/bodyline.css

_{net te laat}

[ Voor 23% gewijzigd door equationunequal op 05-05-2004 12:02 ]

[Bosmonster]

Ook mogelijk, de header en tabs gewoon neerzetten (relatief) en de content op height 100% en een top-margin van header+tabs hoogte.

[mullah]

dit is idd een handige tutorial http://www.alistapart.com/articles/fauxcolumns/

of een zo simpel mogelijke implementatie

code:

<div id="header">header</div>
<div id="tabbladen">tabs</div>
<div id="content">
 <div id="links">linker kolom</div>
 <div id="rechts">rechter kolom<br />met meer tekst</div>
 <br />
</div>
<div>en hier kan ook nog een footer</div>


<style>
body {
text-align: center; /* gecentreerd in window */
}
#header, #tabbladen, #content {
width: 740px; /* past mooi binnen 800 x 600 scherm */
margin: 0 auto; /* gecentreerd in window */
padding: 0;
text-align: left; /* tekst weer normaal */
float: none;
clear: both;
border: 1px solid;
}
#links {
float: left; /* links in de #content */
clear: none; /* bovenaan aansluitend */
width: 200px;
display: inline;
margin: 0;
border: 1px solid;
}
#rechts {
float: left; /* links aansluiten #content */
clear: none; /* bovenaan aansluitend */
width: 536px; /* dan passen de randjes */
display: inline;
margin: 0;
border: 1px solid;
}
br {
clear: both; /* voor geckos */
}
</style>

de marges mag je zelf nog doen

[ Voor 11% gewijzigd door mullah op 05-05-2004 12:16 ]

[Verwijderd]

dat denk ik niet Bosmonster (in quirks mode wel ja), je margin komt namelijk bij die 100%.

Wat mij het probleem lijkt is gewoon de left (of de padding) van de content wat hoger moet. Want nu wrapped de content idd mooi om het menu heen, wat precies het juiste gedrag bij een float is

[Bosmonster]

Das waar.. klonk leuk

Dit is vrij eenvoudig te halen: http://www.bosmonster.nl/files/blokkendoos.html

Die hoogte van 100% lijkt me ook niet echt nodig. Een eventuele achtergrond zou je in de main-div kunnen verwerken.

[oscarvdb]

Bosmonster schreef op 05 mei 2004 @ 12:18:
Das waar.. klonk leuk

Dit is vrij eenvoudig te halen: http://www.bosmonster.nl/files/blokkendoos.html

Die hoogte van 100% lijkt me ook niet echt nodig. Een eventuele achtergrond zou je in de main-div kunnen verwerken.

Die hoogte 100% was in mijn ogen een oplossing om die 'lege' ruimte die er nu is onder het menu, op te vullen. Ik ga de oplossingen die hier staan even proberen op mijn model. Bedankt

[oscarvdb]

Het is me gewoon gelukt door simpelweg dit toe te voegen in #content:

code:

    left: 160px;
    float: left;
    width: 590px;

Bedankt iedereen, echt super!