Floating fieldset with same height

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:

Result

Any suggestion?

Why would you `float` a table cell? Use `display: inline-block`. [**DEMO HERE**](http://jsfiddle.net/Ruddy/j2jRb/) — Ruddy, Apr 10 '14 at 07:43
Sorry what? I write the correct answer and you give it to someone else? Where did you say anything about using `jQuery` in your question. You tagged it as `HTML` and `CSS`. Next time make your question more clear on tools we can use to fix the problem. Not even a +1, psh! — Ruddy, Apr 10 '14 at 09:16

Santy · Accepted Answer · 2014-04-10T09:22:01.550

2

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);
});

edited Apr 10 '14 at 09:22

answered Apr 10 '14 at 08:05

Santy

304
1
3

Just to let you know, there's no reason to have `display: table-cell` there. – Ruddy Apr 10 '14 at 09:17

score 0 · Answer 2 · edited May 23 '17 at 12:15

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

Floating fieldset with same height

2 Answers2

HTML:

CSS:

HTML:

CSS: