How do I make two divs have equal height and width?

Question

I am working on an HTML web page that displays flashcards. These flashcards have a description on front and back, as well as the possibility of having an image or linked video on the front and back. The front and back are displayed in separate divs, and I am using Bootstrap. I am setting the background of each div to be white, but after doing so I realized they are not the same height.

This does not work as shown in the image above.

#front_card,
#back_card {
  background-color: white;
}

.row.col-sm-4 {
  display: flex;
}

.col-sm-4 {
  flex: 1;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row" id="study-row">
  <div class="col-sm-4" id="white-col">
    <h3> Front </h3>
    <div id="front_card"></div>
  </div>
  <div class="col-sm-4" id="white-col">
    <h3> Back </h3>
    <div id="back_card"></div>
  </div>
  <div class="col-sm-4">
    <button class="right" id="flip_card" type="submit">Flip Card</button><br /> <br />
    <button class="right" id="next_card" type="submit">Next Card</button><br />
  </div>
</div>

You could try to ajust the height using .row{display: flex;} as shown: https://jsfiddle.net/tfcdn8pL/, about the width, bootstrap should do it for you by using .col-... — Paulo Lima, Apr 20 '17 at 12:49

score 1 · Accepted Answer · answered Apr 20 '17 at 12:56

Use flex to set an equal height for the div siblings... like this

#front_card,
#back_card {
  background-color: red;
  padding:5px;
  overflow:hidden;
  min-height:100%;
}
#front_card img{
width:100%;
}

.row{
  display: flex;
}

.col-sm-4,.col-xs-4 {
  flex: 1;
  padding: 1em;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row" id="study-row">
  <div class="col-sm-4 col-xs-4" id="white-col">
    <h3> Front </h3>
    <div id="front_card">
      <img src="http://placehold.it/150x350">
    </div>
  </div>
  <div class="col-sm-4 col-xs-4" id="white-col">
    <h3> Back </h3>
    <div id="back_card"></div>
  </div>
  <div class="col-sm-4 col-xs-4">
    <button class="right" id="flip_card" type="submit">Flip Card</button><br /> <br />
    <button class="right" id="next_card" type="submit">Next Card</button><br />
  </div>
</div>

How do I make two divs have equal height and width?

1 Answers1