div laten resizen naar de grote van andere div

[-SaveMe-]

Ik heb dus een div container met daarin twee divs: de rechter kan langer of korter zijn. De linker heeft altijd de zelfde hoeveelheid content. Nu zou ik de linker div graag de hoogte van de rechter div laten krijgen.

Heb geprobeerd met JS de hoogte van de linker div te zetten gelijk aan de hoogte van de rechterdiv, maar dat werkt niet (ik krijg of geen hoogte terug, of 0 - heb style.height, offsetheight en clientHeigth geprobeerd).

iemand een idee ?

[crisp]

faux columns

[-SaveMe-]

Thanks voro het snelle antwoord.

had eigenlijk gehoopt dat er een andere oplossign was ... (JS bijvoorbeeld)

[disjfa]

-SaveMe- schreef op vrijdag 11 augustus 2006 @ 14:20:
had eigenlijk gehoopt dat er een andere oplossign was ... (JS bijvoorbeeld)

Waarom?

Makkelijk doen: faux columns; of moeilijk doen: js

[Rowanov]

Daarbij werkt deze css (een simpele achtergrond) in vrijwel elke browser en heb je met javascript nog altijd de kans dat mensen het uit hebben staan

[Boelie-Boelie]

@Rowanov: plaatjes kunnen ook uit

[Rowanov]

Maar dan is de lengte van de kolom niet zichtbaar en dus ook niet zo belangrijk om iets onzichtbaars even lang te maken

[-SaveMe-]

Ik heb de layout dus aangepast en gebruik gemaakt van faux columns.
Rare is nu dat in FF de top en bottom border direct aan elkaar worden geplakt, alsof de contentdiv ertussen in geen content bevat.

De content is er wel, maar die loopt gewoon 'uit' de div ????

[BtM909]

Even handig voor de search, dit is een iets andere methode om 'divs' gelijke hoogte te laten krijgen:

In search of the One True Layout

[-SaveMe-]

Hmmmm, die alternatieve non faux columns methode maar eens proberen dan ....

Enne thanks voor de link. Interessant stukje!

[ Voor 23% gewijzigd door -SaveMe- op 14-08-2006 11:13 ]

[Verwijderd]

Een hele makkelijke manier om dit te omzeilen, is door je container een achtergrondafbeelding te geven die bestaat uit twee kolommen. Die achtergrondafbeelding is bijvoorbeeld 1 pixel hoog en herhaal je gedurende de hele hoogte van de bovenliggende div waarbinnen die linker en rechterdiv zitten:

Versimpelde weergave van de css (zal wel niet werken in IE):

code:

#container {
margin: 0 auto;
width:750px;
background: url("750pxbreedtweekolommenen1pxhoog.gif") left top repeat-x;
}
#links {
float:left;
width: 30%;
background-color: transparent;
}
#rechts {
float:right;
width:70%;
background-color: transparent;
}
#footer {
clear:both;
}

Vervolgens de html:

code:

<div id="container">
<div id="links">
</div>
<div id="rechts">
</div>
<div id="footer">
</div>
</div>

Nadeel is wel dat je lay-out hierdoor wat statischer wordt, want de breedte van de kolommen wordt in principe gedicteerd door je achtergrondafbeelding en niet door de css. Als je dat niet erg vindt (en in de praktijk is dat volgens mij 90% van de gevallen) dan is dit een prima en makkelijke manier

[ Voor 15% gewijzigd door Verwijderd op 14-08-2006 11:43 ]

[reddevil]

als de TS met javascript wilt (wat ik niet aanraad, want dan moet je de hoogte bepalen nadat de pagina is ingeladen wat dus het irritante 'verspringen' oplevert), kan je altijd een onload op de pagina zetten en dan via javascript de hoogte van de rechterdiv opvragen en de linkerdiv die hoogte geven.

[Boelie-Boelie]

-SaveMe- schreef op maandag 14 augustus 2006 @ 10:51:
Rare is nu dat in FF de top en bottom border direct aan elkaar worden geplakt, alsof de contentdiv ertussen in geen content bevat.

De content is er wel, maar die loopt gewoon 'uit' de div ????

Aangezien je geen voorbeeldje hebt, is het gokken wat de oplossing is; ik denk als eerste aan overflow:hidden wanneer je gebruik hebt gemaakt van floats (zoek maar eens op 'clearing floats').

[Schonhose]

De javascript oplossing:

JavaScript:

   function setHgt()
   {
      OBJ1=document.getElementById('naam_div1');
      OBJ2=document.getElementById('naam_div2');
      H=Math.max(OBJ1.offsetHeight,OBJ2.offsetHeight);
      OBJ1.style.height=H+'px';
      OBJ2.style.height=H+'px';
   }
window.onload=setHgt;

naam_div1 en 2 moet je zelf even invullen.

[-SaveMe-]

Bedankt voor alle extra info en antwoorden.

@monchito: die oplossing had ik ook al geprobeerd, maar daarbij loopt mijn content uit de div...
Ik heb allerhande mogelijke clears geprobeerd, zonder resultaat.

Het probleem zit em er waarschijnlijk in dat ik werk met een framework waar ik niet buiten mag.
Dat framework genereert nog tables als basisstructuur en hetgeen ik probeer te doen zit in een TD van die basistable.