2 div's rekken tot onderkant - Softwareontwikkeling

woensdag 27 juni 2007 19:32

Acties:

Topicstarter

Ik zit op het moment met een vervelend probleem waar ik op geen enkele manier uitkom. Ik heb 2 div's naast elkaar staan. Nu zitten in de rechterdiv meerdere div's en de onderste daarvan moet helemaal tot onder rekken met een leuk achtergrond kleurtje. In de linkerdiv staat de content. Zodra er geen content meer is (lees: tekst) dan moet er met hetzelfde achtergrond kleurtje de div helemaal tot onder lopen.

Ter voorbeeld beetje HTML

HTML:

<div id='wrapper'>
    <div id='left'>
        Dit is het block waar de content instaat.
    </div>
    <div id='right'>
        <div id='block_1'>
        </div>
        <div id='block_2'>
           Deze moet rekken tot onderaan
        </div>
    </div>
</div>

Cascading Stylesheet:

html, body {
   margin: 0px;
   padding: 0px;
}
#wrapper {
   margin: auto;
   width: 1000px;
}
#right {
   width: 250px;
   margin-left: 750px;
}
#left {
   width: 750px;
   background: url('bg') no-repeat top; 
   float: left;
}

Kunnen foutjes in de code zitten, heb ik even snel getikt. Zoals hierboven beschreven is op het moment de situatie. Hoe kan ik bovenstaande zo aanpassen dat het tot onder rekt met een achtergrond kleurtje?

Ik heb een paar nuttige dingen gevonden, zoals: http://www.gigadesign.be/2006/07/layout-met-100-hoogte/. Hiermee bereik ik echter niet het gewenste resultaat.

woensdag 27 juni 2007 20:42

Acties:

Verwijderd

google faux columns

woensdag 27 juni 2007 20:55

Acties:

T i M

Topicstarter

Heb ik geprobeerd, maar heb een probleem omdat ik al een background in mijn body heb staan. Zijn daar alternatieven voor?

woensdag 27 juni 2007 21:06

Acties:

Mei

<html> kan je ook nog een achtergrond geven.

woensdag 27 juni 2007 21:20

Acties:

Verwijderd

Imo vergeet je een heel stuk code? Er wordt helemaal geen style toegewezen aan #block_2. Het meest simpele wat je sowiezo kan proberen is hem een height: auto; mee te geven

Als dat niet werkt kijken we weer verder.

vrijdag 29 juni 2007 10:16

Acties:

gvanh

Webdeveloper

Wel faux columns gebruiken. Als je nou gewoon een centrale <div> maakt met daarin twee kolommen, dan kun je aan die <div> de achtergrond meegeven.

Zie voor een live toepassing daarvan: www.ortho-care.eu. Klik in de rechterkolom maar 'ns met de rechter muisknop en kies "view background" ... dan zie je dat die background helemaal van links naar rechts loopt. Dat is toch wat je bedoelt?

Imo vergeet je een heel stuk code? Er wordt helemaal geen style toegewezen aan #block_2. Het meest simpele wat je sowiezo kan proberen is hem een height: auto; mee te geven Als dat niet werkt kijken we weer verder.

Volgens mij werkt het verticaal opgeven van heights in percentages of auto nooit wanneer je XHTML compliant werkt. Wanneer je default doctype gebruikt wil het nog wel 'ns werken in Explorer geloof ik ... ik weet niet helemaal meer in welke situaties wel of niet. In ieder geval werkt de faux columns oplossing altijd en die is daarmee dus betrouwbaarder.

Als laatste heb ik ook nog wel 'ns een JavaScript oplossing gebruikt. Wanneer de hele pagina geladen is, dan kijk je naar de hoogtes van je beide kolommen en maak je de kortste kolom even lang als de langste kolom. Dat is overigens wel een 'lelijke' oplossing en hij zou in mijn optiek dan ook vermeden moeten worden.

[ Voor 51% gewijzigd door gvanh op 29-06-2007 10:20 . Reden: aanvulling ]

vrijdag 29 juni 2007 10:25

Acties:

Verwijderd

Volgens mij werkt het verticaal opgeven van heights in percentages of auto nooit wanneer je XHTML compliant werkt. Wanneer je default doctype gebruikt wil het nog wel 'ns werken in Explorer geloof ik ... ik weet niet helemaal meer in welke situaties wel of niet. In ieder geval werkt de faux columns oplossing altijd en die is daarmee dus betrouwbaarder.

Ik geef toe dat niet meteen dat neerzetten leidt tot het uitrekken, maar ik script zelf ook xhtml strict waarin het na lang proberen toch heeft gewerkt

Maar jij zegt dat faux columns betrouwbaarder zijn en in het geval dat zo is kan hij die beter gebruiken