Enkelt sätt för att få två kolumner till samma höjd

Att få två kolumner att ständigt ha samma höjd i ren CSS är pain-in-the-ass rent ut sagt 9 gånger av 10, speciellt om du inte vill bland in bilder i din lösning.

Samma höjd på fyra kolumner

jQuery tillhandahåller dock en väldigt smart och snabb lösning för att fixa samma höjd på dina kolumner:

[javascript]
var highestCol = Math.max($(‘#colright’).height(),$(‘#colleft’).height());
$(‘#colright, #colleft’).height(highestCol);
[/javascript]

Vad de gör är att det helt enkelt räknar ut höjden på båda, tar den som är högst (längst?) och sätter den mindre till samma höjd.

Värt att notera är att systemet inte är dynamiskt för fem öre när handlar om dynamiska sidladdningar så som med AJAX eller annat som påverkar höjden utan att ladda om sidan. Detta på grund av att höjden sätts med .height(). Sätter man höjden med min-height eller något liknande kanske ett annat resultat infinner sig, men det är ingenting jag har kollat.

Lösningen på det fasta problemet kan också avhjälpas med att binda ett event eller en timer som kollar av höjden vilket helt plötsligt gör systemet lite krångligt. Hade själv problem med det på denna sidan när scriptet skulle samarbeta med Disqus, lösningen hette bakgrundsbild med CSS istället …