Smart way to make divs the same size with css?

Question

I have two different divs with various contents, and would like them to be the same height and width. It seems like a bad idea to set their height and width to a fixed pixel size, because their size should probably vary based on browser/screen size. Setting their width to a percentage works, but percentage is not an option for height.

Is there a way to ensure two divs have the same dimensions without setting to fixed pixel sizes? Or are fixed pixel sizes really so bad?

Are you saying percent for height is not an option in your specific case? Otherwise percent is definitely an option for height. — TreeTree, Jun 02 '15 at 20:37
I believe height simply doesn't work with percentages. If I try to use it, my divs just size their height according to their contents. — ab11, Jun 02 '15 at 20:39
It does work if the parent element has a specified height. Otherwise, what you described happens. — lucasnadalutti, Jun 02 '15 at 20:40
@ab11 have you thought about viewport units, `div{width:50vw;height:50vw;}`? — Stickers, Jun 02 '15 at 20:42
http://jsfiddle.net/0qaz7a70/ to demonstrate what lucasnadalutti said. — TreeTree, Jun 02 '15 at 20:42
@zgood not in this case, OP wants it to be square if you read carefully. — Stickers, Jun 02 '15 at 20:43
viewport sizes look pretty dangerous. my divs are part of a larger layout, viewport dimensions look like it might make my divs grow over other elements. probably tables are the best way to go? — ab11, Jun 02 '15 at 20:52
@ab11 check out this if you have not seen it yet - http://stackoverflow.com/questions/1495407/css-maintain-div-aspect-ratio — Stickers, Jun 02 '15 at 21:04

score 3 · Answer 1 · answered Jun 02 '15 at 20:42

3

Having an outer div with display: table; and these two divs inside it with display: table-cell; should work for you.

answered Jun 02 '15 at 20:42

lucasnadalutti

5,818
1
28
48

score 1 · Answer 2 · answered Jun 02 '15 at 21:28

I'd suggest defining a container div which varies according to screen width (using @media screen) and using css3's flex to define your divs like so :

HTML

<div class="container">
<div class="first-div">first div </div>
<div class="second-div">second div </div>
</div>

CSS

.first-div{
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
    background-color:yellow;
   border: 2px solid black; 
}

.second-div{
    -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
    background-color:blue;
     border: 2px solid black;  
}
.container{
    width:auto; 
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

https://jsfiddle.net/sujy3bq4/19/

Hope this helps you.

score 0 · Answer 3 · answered Jun 02 '15 at 20:43

When using height, you need to make sure that you have a full body to work with. By default, the body height is auto. If you set the height to 100%, you can start to use the height attribute on child elements.

Just remember that height is always set to it's parent:

body,html{height:100%;}
div{width:50%; height:50%;}
.el1{float:left; background:#f00;}
.el2{float:right; background:#0f0;}

<div class="el1"></div>
<div class="el2"></div>

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

0

If using CSS3 is an option in your case then you can use the 'ViewPort Percentage Lengths" Details on W3.

Something like below should work. (Refer question here for more details.)

div {
    height:100vh;
}

edited May 23 '17 at 12:30

Community

1
1

answered Jun 02 '15 at 20:47

Vini

8,299
11
37
49

Anne Gray · Answer 5 · 2015-06-02T21:08:46.800

Super easy and intuitive way to make responsive, square containers
Scalable percentage heights with padding-bottom:

See Codepen

Basically, set the height to 0, and set the bottom padding to any percentage you'd like.

.box {
  float: left;
  width: 23%;
  height: 0;
  padding-bottom:23%;
  margin: 1%;
  background-color: #e6e6e6;
  box-sizing: border-box;
  text-align: center;
}

<section>
  <div class="box">
    1
  </div>
  <div class="box">
    2
  </div>
  <div class="box">
    3
  </div>
  <div class="box">
    4
  </div>
</section>

Smart way to make divs the same size with css?

5 Answers5