Als je 2 of meerdere kolommen langs elkaar hebt en ze moeten even hoog zijn, ongeacht de inhoud, kan je volgend Jquery script gebruiken. Er bestaat ook een pure CSS oplossing en deze vind je op Gigadesign.
HTML
<head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> ...onderstaande javascript code... </script> </head>
<div id="wrap"> <h1>Equal Height Columns with jQuery</h1> <p>This is an example of equal height columns using a single short jQuery function.</p> <div id="col1" class="column"> <p>This three-column design features three columns with significantly varying quantities of content.</p> </div> <div id="col2" class="column"> <p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p> <p>They're simply divs sharing a common class, all of which have been set to the same height.</p> </div> <div id="col3" class="column"> <p>And I think a single class is an addition we can all get behind.</p> </div> </div>
CSS
body {
font: small/1.3em Arial, Helvetica, sans-serif;
background-color: white;
}
#wrap {
width: 600px;
margin: 0 auto;
}
.column {
float: left;
padding: 10px;
}
#col1 {
width: 110px;
margin-right: 10px;
background-color: #E2DDC4;
}
#col2 {
width: 200px;
margin-right: 10px;
background-color: #6B99F6;
}
#col3 {
width: 210px;
background-color: #E87C5E;
}
Opmerking
Je moet ook Jquery zelf eerst in je document toevoegen, volgend script moet na de jquery komen
Javascript
<![CDATA[
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
]]>
