Make divs on one line of the same height - Dynamic Content

Question

I am working on an application that creates dynamic content and displays it on floating divs. Each div occupies 49% of the page width. The problem I am facing is that the height of divs depends on the content.

What I want to do is make divs on one line of the same height. Any suggestions?

.item { background: #c4c4c4; width: 49%; border: 1px solid black; float: left; } 

 <div id="container"> <div class="item"> Test </div> <div class="item"> Hello. Sample <br> Content <br> </div> <div class="item"> Test<br> Sample Content </div> <div class="item"> Test </div> </div> 

Answer 1

Using CSS3 flexbox to make #container layout #container .

The default flex-wrap is nowrap , so it is aligned on one line. Use flex-wrap: wrap to create multiple lines based on the width of the element.

The current browser support for Flexbox is pretty good: Can I use Flexbox?

 #container { display: flex; flex-wrap: wrap; /* Wrap after the items fill the row */ /* Safari specific rules */ display: -webkit-flex; -webkit-flex-wrap: wrap; } .item { background: #c4c4c4; border: 1px solid black; width: 49%; } 

 <div id="container"> <div class="item"> Test </div> <div class="item"> Hello. Sample <br>Content <br> </div> <div class="item"> Test <br>Sample Content </div> <div class="item"> Test </div> </div> 

Answer 2

Use display: table in the containing div and display: block in your "table cells".

Answer 3

Another answer involves using the display: table property in CSS. It is similar to table forests, but allows much more flexibility with CSS and has more browser support than flexbox.

HTML:

 <div id="container"> <div class="row"> <div class="item"> Test </div> <div class="item"> Hello. Sample <br> Content <br> </div> </div> <div class="row"> <div class="item"> Test<br> Sample Content </div> <div class="item"> Test </div> </div> </div> 

CSS

 #container { width: 100%; display: table; } .row { display: table-row; } .item { background: #c4c4c4; width: 49%; box-sizing: border-box; border: 1px solid black; display: table-cell; } 

Violin: http://jsfiddle.net/q5jyfuy6/

Answer 4

You can add as height: 40px; into your .item class to make divs height regardless of content.

 .item { background: #c4c4c4; width: 49%; border: 1px solid black; float: left; height:40px; }