Hoogte website

[red123nax]

Dag allemaal,

Ik heb een probleem met mijn javascript code.
Ik heb een stukje code geschreven zodat de lengte van de div "main" gelijk word gezet aan de lengte van de inhoud.
Dit is omdat ik een div(float:left) en een div(float:right) in de "main" heb staan.
DIT WERKT !

Maar toch werkt dit op een of andere manier niet lekker, omdat bij het laden voor de 1e keer de lengte aan de kortste div ( namelijk div(float:left) ) gelijk word gemaakt en niet aan de langste ( div(float:right) ).

Druk ik vervolgens op F5 om de pagina te refreshen heb ik geen probleem. En dan kan ik dat zo vaak doen als ik wil, totdat ik de browser opnieuw opstart.

Dit is de code die ik heb:
[JS]<script type="text/javascript">
var links = document.getElementById("main_links").clientHeight;
var rechts = document.getElementById("main_rechts").clientHeight;

if(links<rechts)
{
document.getElementById("main").style.height = rechts+'px';
}
else
{
document.getElementById("main").style.height = links+'px';
}
</script>[/JS]

Iemand enig idee hoe dit komt?
en natuurlijk nog beter, hoe dit opgelost kan worden ?

Groeten,
Xander

 

[phobia]

als ik het goed begrijp heb je een main div met daarin een een div(float:left) en een div (float:right)
en je wilt dat de main div 100% van je browser is en de floating divs moeten 50% van de main div zijn.

Of begrijp ik je nu helemaal verkeerd?
Wacht, ik heb het nog eens gelezen. En ik denk dat je dit wilt
[JS]<script type="text/javascript">
var links = document.getElementById("main_links").clientHeight;
var rechts = document.getElementById("main_rechts").clientHeight;

function check() {
if(links<rechts)
{
document.getElementById("main").style.height = rechts+'px';
}
else
{
document.getElementById("main").style.height = links+'px';
}
}
check();
</script>[/JS]

 

[red123nax]

Ehm niet helemaal.

Ik heb een div main met daarin een div(float:left) en een div(float:right)
De lengte van div "main" moet gelijk worden aan de lengte van div(float:left) of div(float:right) aan de hand van welke van de 2 langer is.

Maakt dit het al duidelijker?

 

[red123nax]

Ja dat is inderdaad wat ik hebben wil. Maar dit heb ik dus al wel.
Alleen het probleem is dat dit de eerste keer dat ik de website laad niet werkt.

Is hier een oplossing voor zodat dit gewoon direct de 1e keer goed gaat?

 

[Naarling]

Daar heb je geen javascript voor nodig, ik zal hier twee manieren geven waarop je het probleem op kunt lossen, allereerst met pure CSS (werkt niet in IE6 en 7 maar goed)

Stel dat dit je HTML is.

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

Vervolgens zet je dit in je CSS.

#container:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

Deze code zet een onzichtbare . in de container, die met clear onder de twee kolommen gezet wordt. Hierdoor wordt de container opgerekt.
Voor de twee oplossing moet de html een beetje worden aangepast.

<div id="container">
<div id="links">
</div>
<div id="rechts">
</div>
<span class="clear"></span>
</div>

In plaats van een punt komt er nu dus een lege span in de container te staan
De CSS:

.clear{
clear:both;
height:0;
display:block;
}

Deze code zet de span onder de kolommen, geeft hem weer als een blok, met hoogte 0.

 

[red123nax]

Jha dankje
dat had ik nodig.

Ik heb het javascript nu weggehaald en vervangen door dat stukje css.

Dit mag trouwens wel worden verplaatst naar ander forum waar het dus wel thuis hoort..