[CSS] onderkant 2 divs gelijkhouden

[Mr_Kite]

Ik heb een simpele 2 kolommen site, waarbij ik een linker kolom heb waar korte stukjes in komen en soms een submenu, en een rechter kolom waar de content in staat. Nu heb ik een aantal voorwaarden gesteld, maar het lukt me met geen mogelijkheid om een css schema te bedenken waarbij alle voorwaarden voldaan worden:

• Als de linker kolom (door content) groter is dan de rechter, moet de rechteronderkant meeschalen zodat ze op 1 lijn zitten
• Andersom net zo (links wordt langer als rechts meer content heeft)
• De kolommen moeten beide een minimum hoogte hebben.

nu heb ik al een aantal dingen geprobeerd:

• Constructies met bottom: 0, maar daar doet IE niks mee
• Constructies waarbij de linker en de rechter kolom creatief vanuit elkaar gedefinieerd zijn, met extra spacer divs die voor de minimum hoogte zorgen
• Combinaties daarvan en nog wat andere vage experimenten

eigenlijk kom ik tot de conclusie dat tabellen misschien nog wel de beste oplossing zijn in dit geval en dat vind ik een hele vervelende conclusie, te meer omdat ik dat stiekem al geprobeerd had na een heleboel klooien en tot de conclusie kwam dat het zelfs daar erg lastig mee ging worden (hoewel ws. gemakkelijker?).

Hier is mijn laatste test, for what it's worth: http://zab.extrapuur.nl/~ewout/pf/test.html (werkt niet in IE en de linker kolom schaalt niet mee met de rechter)
en hier de site zoals hij nu is (nog lang niet af): http://zab.extrapuur.nl/~ewout/pf/?about

ik ben ook bereid om eventueel slim javascript te gebruiken, omdat dat sowieso een voorwaarde is voor mijn site, maar ik heb voorkeur bij nette css!

[crisp]

Faux Columns

[k0ewl]

topickaap:
Mhh, ik zit met hetzelfde probleem, alleen kan ik het niet oplossen met faux columns.
Ik heb namelijk dat ze in de administratie de linker en de rechterkant een andere kleur kunnen geven, maar er is niet vast gesteld welke kleur dat dan moet zijn. Dat is namelijk ook aan te passen in de admin.

HTML:

<DIV id="right">
  <DIV class="title" style="background-color: #62929E;">
    <IMG src="./images/title.php?angle=1&title=NIEUWSBRIEF&fore=FFFFFF&back=62929E" align="absmiddle">
  </DIV>
  <DIV class="content_image" style="background-color: #62929E; color: #FFFFFF;">
    <A href="nieuwsbrief"><IMG src="./images/nieuwsbrief.jpg" border="0" align="absmiddle"></A>
  </DIV>
</DIV>

Die kleurcodes worden dus straks uit de database gehaald en de titels van de plaatjes etc ook, vandaar het PHP-script. Hoe krijg ik dus dat ik wel beide kolommen evengroot heb?

Het enige wat kan naar mijn mening is een tabel. Maar die zijn niet voor layout enz

Het gaat btw om deze site: http://www.b2ontwerp.nl/eijkelkamp/
En dan om het rechter menu. Dus waar nieuwsbrief staat.

Nog iets: Als ik hem door de validator haal krijg ik errors. Ik gebruik HTML strict 4.01 als doctype. Maar ik krijg dus errors in de links en in de embed voor de flash.

Waarom zoekt hij naar errors in links?

Alleen voor de flash snap ik zowiezo niet, omdat het wel aangeraden wordt om het op deze manier te doen.

HTML:

      <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="735" height="284">
        <PARAM name="flash" value="flash.swf">
        <PARAM name="quality" value="high">
        <PARAM name="bgcolor" value="#DB0071">
        <EMBED src="flash.swf" quality="high" bgcolor="#DB0071" width="735" height="284" name="flash" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></EMBED>
      </OBJECT>

[ Voor 34% gewijzigd door k0ewl op 14-11-2006 13:16 ]

[Rowanov]

Je stylesheet kan je ook met php er uit laten gooien. Mocht dat teveel gedoe zijn, dan maak je een externe stylesheet die de non-variabele styling bevat, waarna je in een style element in de head door php de variabelen laat invullen.

[k0ewl]

Rowanov schreef op dinsdag 14 november 2006 @ 13:19:
Je stylesheet kan je ook met php er uit laten gooien. Mocht dat teveel gedoe zijn, dan maak je een externe stylesheet die de non-variabele styling bevat, waarna je in een style element in de head door php de variabelen laat invullen.

Helaas zal dat niet veel helpen, want de grote weet je pas wanneer het er allemaal staat en dan kun je het niet meer met PHP aanpassen.

[Mr_Kite]

crisp schreef op dinsdag 14 november 2006 @ 08:20:
Faux Columns

Dat werkt dus niet in mijn geval omdat het ten eerste geen ware kolommen zijn, en ten tweede ik een ingewikkelde linker kolom heb die van kleur verandert en waar een png-gradient in zit als overlay...

wat rowanov voorstelt is eventueel wel een optie, zeker als ik de maten in em zou opgeven, maar wel vervelend omdat je dan voor iedere pagina moet instellen hoe hoog hij wordt (met 30+ pagina's een suf karweitje en bovendien niet echt duurzaam)

[Rowanov]

Het kan op zich ook prima met javascript, waarmee je de layout volgense de config waarden update. Nadeel is dat browsers zonder javascript minder styling doorkrijgen en dat het mogelijk een flikkering van de pagina tot gevolg heeft als de pagina wat zwaarder is.

[Mr_Kite]

Ik heb nu inderdaad met javascript gedaan, op wat kleine IE probleempjes na is het nu opgelost. dit artikel was daarbij wel handig (hoewel ze er wel een heel lang verhaal van maakten)

[Verwijderd]

Daar heb ik ooit eens een javascriptje voor geschreven om 2 divs even hoog te maken:

http://joggink.be/snippets/js/resize_divs/not-animated/

Ik weet niet of je d'r nog iets mee bent?