[CSS] Div laten doorlopen tot footer

[We Are Borg]

Bekend probleem, ik weet het . Bij de eerste DIV kwam ik er met de GoT search wel uit, maar de 2^de krijg ik niet goed werkend.

Online voorbeeld (beetje gestript om het overzichtelijker te maken voor dit voorbeeld):
HTML: http://www.planet.nl/~terps407/got/index.html
CSS: http://www.planet.nl/~terps407/got/css/default.css
IE CSS: http://www.planet.nl/~terps407/got/iestyle.css

Stukje relevante code:

Cascading Stylesheet:

#menuwrap {
    float: left;
    display: block;
    width: 216px;
    height: 100%;
    margin: -65px 0 0 23px;
    border-top: 1px solid #E3E3E3;
    border-left: 1px solid red; /* deze moet dus doorlopen */
    border-right: 1px solid red; /* en deze ook */
}

Open het voorbeeld in IE of Firefox en zie wat het huidige effect is. Ik wil graag het volgende bereiken:

Hmm, paint en JPG is niet super. De rode balkjes (border left & right) lopen dus door tot het einde van de laatste LI, terwijl ik graag wil dat het helemaal naar onder door loopt

Die paarse streepjes heb ik er zelf even bij gezet met paint, dat moet dus doorlopen . Als de tekst aan de zijkant toeneemt, wordt de pagina groter, rekken de rest van de DIV'jes mee behalve de #menuwrap.

Met GoT en een beetje google werk kwam ik op een position:absolute, wat bijna het gewenste resultaat geeft (de left & right border loopt dan net iets teveel door in firefox), maar IE gaat dan gelijk vervelen door het menu verkeerd te positioneren + de left & right border lopen dan niet door

Een height 100%, wat ik bij een andere DIV kon toepassen om het gewenste effect te krijgen, werkt hierbij helaas niet

Mijn vraag dus nu: in welke richting moet ik zoeken om de menuwrap te laten doorlopen tot aan de footer in zowel IE als firefox ?

[ Voor 10% gewijzigd door We Are Borg op 26-06-2005 14:22 ]

[Zoefff]

Dat is inderdaad een bekend probleem. De makkelijkste manier om dit op te lossen is met faux columns

[We Are Borg]

Blijkbaar begrijp ik de uitleg niet helemaal op faux columns. Wat ik eruit begrijp is dat je bij de div die je wilt oprekken een willenkeurige background moet plaatsen (in de kleur van de achtergrond) en die dan verticaal oprekt zodat de div dus wel 100% mee oprekt.

Als ik een background image toevoeg aan mijn #menuwrap en die met repeat-y laat repeaten, dan wordt er niks opgerekt . De img wordt dan netjes op de achtergrond geplaatst en stopt precies onder de laatste menu item. Er is geen height geplaatst op mijn UL of de div#menuwrap, en als ik dat wel doe (height:100%) geeft dan geen verschil

[ Voor 22% gewijzigd door We Are Borg op 26-06-2005 17:27 ]

[Zoefff]

Het idee is dat je geen kolommen maakt met CSS, maar met een simpel plaatje wat je in de y-richting herhaalt.

Neem een container-div, waar je 2 kolommen in stopt (menu en content). De container geef je een achtergrondplaatje, met repeat-y. Word het menu nu groter dan de content, dan rekt het menu de container uit, en heb je in de content nog een achtergrond, ondanks dat de content al vóór het einde ophoud. Andersom, als er meer content dan menu is, werkt het natuurlijk ook.

[Zoefff]

Dus,

Cascading Stylesheet:

#innerwrapper {
    background-image:url(plaatje_met_2_rooie_streepjes.gif);
    background-repeat:repeat-y;
}

Dan moet je er alleen nog iets op verzinnen dat het menu bóven de content uitsteekt, maar dat kan je dan wel weer met een border oplossen

[We Are Borg]

Hmm, dus ik had het behoorlijk verkeerd begrepen dus

Dus als ik jouw uitleg toepas:

HTML:

<div id="innerwrapper">
                <div id="menuwrap">
                        <ul id="topmenu">
                            menut zut
                        </ul>
                </div>
                <div id="paragraphwrap">
                    <h2>Mijn titel</h2>
                    <p>tekst enzo</P
                </div>
</div>

Dan moet op de innerwrapper een background image met repeat-y ?

edit:
Hmm, ik moet toch iets sneller posten . Ik ga er eens naar kijken, thx

[ Voor 27% gewijzigd door We Are Borg op 26-06-2005 17:40 ]

[Zoefff]

Juist

Het is overigens niet per sé nodig om rond het menu ook nog eens een div te zetten, aangezien de ul van het menu zelf ook al een blokelement is. Die kan je dus precies hetzelfde behandelen als de div die je er omheen zet

[We Are Borg]

Ik wil (of liever gezegd, het design wil) dat er een dubbele border omheen komt. Dus om de UL en om de DIV. Vandaar dat ik die DIV eromheen heb gegooid

edit: Oh wacht, nu dat ik het plaatje gebruik kan het idd zonder DIV als ik het even goed bedenk. Ok, ga nu eerst prutsen, bedankt

edit2: Dat werkt super, bedankt voor je uitleg

[ Voor 42% gewijzigd door We Are Borg op 26-06-2005 18:07 ]

[We Are Borg]

Geef toch even een schop, aangezien ik IE niet zo ver krijg om het idee van de faux columns te accepteren.



Firefox doet het prima, maar IE loopt dus niet door wanneer er weinig tekst zit in de div#contentwrapper. Pas wanneer er genoeg tekst in zit (lees: tekst is in vergelijk met menu langer) rekt de background image van het menu (de 2 borders mee).

Code:
HTML: http://www.planet.nl/~terps407/got/index.html
CSS: http://www.planet.nl/~terps407/got/css/default.css
IE CSS: http://www.planet.nl/~terps407/got/iestyle.css

Als ik de contentwrapper een bottom margin van 200 px meegeef, dan werkt het wel. De kleine tekst wordt dan gecompenseerd met de margin, maar deze oplossing is niet echt de bedoeling . Op die manier is er altijd een lege ruimte, ook als de tekst enorm lang is en die margin dus overbodig wordt. Kortom, deze oplossing voldoet niet echt .

Een height: 100% toevoegen aan de contentwrapper geeft helaas ook geen oplossing

Concrete vraag: wat doe ik fout waardoor het alleen in FireFox werkt, of andersom: waarom werkt het niet in IE . Heb ik de uitleg van Zoefff verkeerd geimplementeerd

[wicher|IA]

Ik heb niet het hele verhaal gelezen, maar als je de 'faux columns' over de hele hoogte van het scherm wilt hebben is het veelal ook het beste ze als achtergrond van de body in te stellen.

[We Are Borg]

Body als in <body> of zoals ik dacht dat er bedoelt werd met de body, namelijk de innerwrapper in mijn geval ?

[Zoefff]

Het heeft met de float:left te maken van #topmenu, als je die weghaald dan rekt het menu de div in IE wel uit. Maar, dan ziet het er natuurlijk verneukt uit. Hoe je het moet oplossen weet ik (nog) niet

Een oplossing is natuurlijk ook om niet #innerwrapper het achtergrond plaatje mee te geven, maar #content. Maar dan moet je wel weer zorgen dat het 'afgedekt' word op de plaatsen waar je geen lijntjes wilt hebben (de header en footer bijvoorbeeld).

[ Voor 38% gewijzigd door Zoefff op 28-06-2005 14:22 ]

[Zoefff]

Nouja, ik laat het aan iemand anders over om een oplossing te vinden, want ik kan niets bedenken en/of vinden

In m'n zoektocht wel een artikel gevonden waarmee ze het kolommen probleem met javascript oplossen, wellicht ook interessant voor jou

[ Voor 10% gewijzigd door Zoefff op 28-06-2005 14:34 ]

[We Are Borg]

Hmm, had de float niet verwacht als mogelijk boosdoener, maar bedankt voor het testen

Ik kan idd op de #content een background image gooien, maar het 'probleem' is dat ik daar normaal al een background image heb. Die heb ik voor het gemak even weg gehaald, om de code wat leesbaarder te maken. Kan ik wel oplossen door een extra div te maken voor die background image die ik nu even had verwijderd. Ik ga even testen . Als iemand nog een andere oplossing kan bedenken, hoor ik dat graag.

[ Voor 10% gewijzigd door We Are Borg op 28-06-2005 14:37 ]