html - CSS element class - Height differs based on content, how to fix? -

html - CSS element class - Height differs based on content, how to fix? -

im having issue css. check website @ http://yourdesigns.nl/ssi/index.php

as can see have 3-column row @ center of index page. each column has border gives "box-like" feeling. problem that, 1 time content of box lesser other, box gets smaller in height.

my goal give boxes same height , know possible adding height property class of box elements, content grabbed database, if client updates content, may possible boxes bigger fixed height value of class results in content overlapping border/boxes.

how can boxes of same height, without giving fixed height value in css?

thanks in advance,

michael

if want maintain box heights equal , prevent overflow set height , overflow properties in css box class:

.boxes { height:500px; overflow: hidden; text-overflow:ellipsis; // ends text block "..." - css3 no ie7/ie8 back upwards }

if want boxes re-size dynamically based on largest box utilize jqery:

$(document).ready(function () { var largestbox = math.max($('#box1').height(),$('#box2').height(),$('#box3').height()); $('.boxes').height(largestbox ); });

here's jsfiddle demonstrating jqery option: http://jsfiddle.net/ejpsw/

html css frontend