CODEWITHSUNDEEP
css
Wizard
Wizard

Reputation: 11285

css equal height div blocks

I have 3 blocks

enter image description here

<div>loremloremloremlorem</div>
<div>loremloremlorem</div>
<div>loremloremloremlorem</div>

How to set CSS to have aqual height ? I cant use row, because it's responsive design and I 1 row can be flexible count of items.

Upvotes: 2

Views: 117

Answers (4)

Michel Makei Gefuni
Michel Makei Gefuni

Reputation: 167

You can solve this, by using display: table in the container div, and use display: table-cell in children.

See my CodePen code:

http://codepen.io/michelgefuni/pen/YPeVxN

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You can also use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

div.container {
    display:flex;
}
div.item {
    border:1px solid #000;
    display:block;
    width:100px;
}
<div class="container">
    <div class="item">lorem lorem lorem lorem lorem lorem</div>
    <div class="item">lorem lorem lorem</div>
    <div class="item">lorem lorem lorem lorem lorem lorem lorem</div>  
</div>

Upvotes: 1

Andy Furniss
Andy Furniss

Reputation: 3914

Use display:table and display:table-cell.

.container {
    display:table;
}

.item {
    display:table-cell;
    width:100px;
    border:2px solid black;
}

.item + .item {
    border-left:none;
}
<div class="container">
    <div class="item">test test test test</div>
    <div class="item">test test test test test test test test test test test test</div>
    <div class="item">test test test test test test test test</div>
</div>

Upvotes: 1

Luca Detomi
Luca Detomi

Reputation: 5716

If you can wrap them inside a container, you can set it display:table and assign display:table-cell to each inner DIV. In this way, blocks are treated as table cells and so, alla with equal height. Please look at this jsFiddle

CSS:

#wrapper
{
    display:table;
}

#wrapper div
{
    display:table-cell;
    border:solid 1px red;
    width:50px;
}

Upvotes: 0

Related Questions