Dynamic height of one div and sibling divs autoheight

Question

What i have now: Image

I know is that the height of brown div will be dynamic so i wanted make the other 3 divs (blue, gray and red) adjust/resize to brown div height automatically. Whats the best way to accomplish this?

Here is some of my code:

<div class="row">

    {{--SCORES--}}
    <div class="col-md-3" style="background-color: #2F96B4">
    </div>

    {{--BOARD--}}
    <div class="col-md-4" style="background-color: #8a6d3b">
    </div>

    {{--PLAYERS AND SPECTATORS--}}
    <div class="col-md-2" style="background-color: #666666">
    </div>

    {{--CHAT--}}
    <div class="col-md-3">
    </div>
</div>

Note: Yes, i'm using bootstrap to limit the width of divs.

Thank you.

score 0 · Answer 1 · answered Dec 15 '15 at 17:49

0

You might want to define it as a table:

.row { display: table; }
.my_divs { display: table-cell; }

where you'd have to add the .my_divs class to all four divs

answered Dec 15 '15 at 17:49

Johannes

64,305
18
73
130

Didn't work. I tried remove the bootstrap classes and worked. However i need accomplish this with those classes to make sure the website is responsive. So any idea how to do it with bootstrap? – Xplouder Dec 15 '15 at 18:00

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

0

Solved with this style:

.Row {
    display: table;
}

.Row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Ref: How can I make Bootstrap columns all the same height?

edited May 23 '17 at 12:30

Community

1
1

answered Dec 15 '15 at 18:27

Xplouder

148
1
4
13

Dynamic height of one div and sibling divs autoheight

2 Answers2