具有相同高度的浮动字段集

Question

I've this code:

<div id="container">
 <fieldset class="box">
  <legend>Title</legend>
   CONTENT
  </fieldset>
  <fieldset class="box">
  [etc...]
  </fieldset>
</div>

I would like to have these fieldsets with the same height and floating.

So I've set the container with display:table and each fieldset with display:table-cell but, if I use float:left to floating each box (fieldset), display:table-cell doesn't work anymore.

This should be the result:

Any suggestion?

Answer 1

Using simple jQuery code you can achieve the equal column height

DEMO

HTML

<div id="container">
    <fieldset class="box">
        <legend>Title</legend>CONTENT
        <br/>test</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
</div>

CSS

.box {        
    float:left;
    width:25%;
}

jQuery

$(function () {
    var H = 0;
    $("div").each(function (i) {
        var h = $(".box").eq(i).height();
        if (h > H) H = h;
    });
    $(".box").height(H);
});

Answer 2

Ok I will create an answer. So put it simply, display: table-cell cannot be used with fieldset . Find out more in this question

You could just use div and change the look a little bit. Or just use them as containers for each.

But I would recommend using display: inline-block for this.

DEMO HERE

HTML:

<div id="container">
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
</div>

CSS:

.box {
    width: 200px;
    height: 200px;
    display: inline-block;
}

---

And this is how you could create containers around them to be able to use display: table; etc.

HTML:

<div id="container">
    <div class="innercon">
        <fieldset class="box">
            <legend>Title</legend>CONTENT</fieldset>
    </div>
    <div class="innercon">
        <fieldset class="box">
            <legend>Title</legend>CONTENT</fieldset>
    </div>
    <div class="innercon">
        <fieldset class="box">
            <legend>Title</legend>CONTENT</fieldset>
    </div>
</div>

CSS:

#container {
    display: table;
}
.innercon {
    display: table-cell;
}

.box {
    width: 200px;
    height: 200px;
}

DEMO HERE