CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sohrab Hejazi
Sohrab Hejazi

Reputation: 1511

Make divs on same row the same height - Dynamic Content

I am working on an application that generates dynamic content and displays them on floating divs. Each div takes 49% width of the page. The problem I'm running into is that the height of the divs vary depending on the content.

What I'm looking to do is make the divs on the same row 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>

Upvotes: 5

Views: 4675

Answers (4)

m4n0
m4n0

Reputation: 32255

Using CSS3 flexbox to make the #container adapt flexible box layout.

Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.

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>

Upvotes: 8

Sudipta Maity
Sudipta Maity

Reputation: 11

You can add like height:40px; in your .item class to make height of the divs independent of the content.

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

Upvotes: 1

Phillip Chan
Phillip Chan

Reputation: 993

Another answer involves using the display: table property in CSS. It is similar to table scaffolding, 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;
}

Fiddle: http://jsfiddle.net/q5jyfuy6/

Upvotes: 1

David P
David P

Reputation: 2083

Use display: table on the containing div, and display: block on your "table cell" divs.

Upvotes: 1

Related Questions