Set equal height for group of divs

Question

Within a section, I have 4 divs. The first div, which is floated to the left currently has both width and height in pixels. What I want is for the height to be DYNAMICALLY generated based on the other div's height. I am quite stuck. Here is my jsfiddle : https://jsfiddle.net/ksaluja/62o7ydan/ Thanks!

<section>
<div class="attempt">

</div>
<div>
    <ul id="menu">
        <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
        <li><a style="background:#788291">Button2</a></li>
    </ul>
</div>

<div>
    <H2>TITLE</H2>
    <p>
        BADKADA
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>

    <p>
        Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
    </p>
</div>

<div>
    <H2>TITLE2</H2>
    <p>
        BADKADA
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>

    <p>
        Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
    </p>
</div>
</section>

CSS

.attempt {
    float:left;
    width: 15px;
    height: 1290px;
    background: #3F4E64;
    margin-right:20px;
}

Do you have strict limitations on which browsers you must support? — Jacob, Feb 29 '16 at 03:27

score 0 · Answer 1 · answered Feb 29 '16 at 03:34

If you're able to use them, flex boxes make things much easier on you. You can make the section display: flex, and move the things for the right-hand column all into the same container. CSS would be something like this:

section {
  display: flex;
}

.attempt {
  width: 15px;
  background: #3F4E64;
  margin-right:20px;
}

...and the HTML:

<section>
  <div class="attempt">...</div>
  <div>The rest of the content...</div>
</section>

Here is a demonstration JSFiddle.

score 0 · Accepted Answer · edited May 23 '17 at 12:08

You can achieve this layout with CSS flexbox.

Make the section a flex container, which converts the divs to flex items.

But wrap the last three divs in a nested flex container. Now the section has two flex items, side-by-side, and sharing equal height. No floats or declared heights necessary. Each column will track the other. The column with taller content sets the height for both.

CSS

.outer-flex-container {
    display: flex;
}

.attempt {
    width: 15px;
    background: #3F4E64;
    margin-right: 20px;
}

HTML

<section class="outer-flex-container">

    <div class="attempt"></div><!-- flex item #1 -->

    <section class="inner-flex-container"><!-- flex item #2 -->
        <div>
            <ul id="menu">
              <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
              <li><a style="background:#788291">Button2</a></li>
            </ul>
        </div>

        <div>
            <H2>TITLE</H2>
            <p>BADKADA</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus Fusce luctus ipsum in...</p>
        </div>

        <div>
            <H2>TITLE</H2>
            <p>BADKADA</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus Fusce luctus ipsum in...</p>
        </div>
    </section><!-- END .inner-flex-container -->

</section><!-- END .outer-flex-container -->

Revised Demo

Learn more about equal height columns with flexbox here:

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

I am not 100% sure if I can use the flex box, but this definitely worked! Thanks — Kulwant, Feb 29 '16 at 05:53
For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. — Michael Benjamin, Dec 23 '16 at 18:50

score 0 · Answer 3 · answered Feb 29 '16 at 04:15

You can achieve this by setting display:table to the section and display:table-cell to the two div's inside it (i.e .attempts div and its siblings). Using this you need not set float or height.

DEMO

CSS:

section {
  display: table;
}
.attempt {
    display:table-cell;
    width: 15px;    
    background: #3F4E64;
    margin-right:20px;
}
section div{
    display:table-cell;
}

Set equal height for group of divs

3 Answers3