Smart way to make divs the same size with css?

Question

I have two different divs with different contents, and they 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 probably depends on the size of the browser / screen. Setting their width in percent works, but percent is not an option for height.

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

Answer 1

The presence of an external div with display: table; , and these two divs inside it with display: table-cell; should work for you.

Answer 2

I would suggest defining a container div that changes to fit the width of the screen (using @media screen ) and using css3 flex to define your divs as follows:

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.

Answer 3

When using height, you need to make sure that you have a full body to work with. By default, body height is automatic. If you set the height to 100% , you can start using the height attribute for the children.

Just remember that height is always set for it 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> 

Answer 4

If using CSS3 is an option in your case, you can use the "Percentage of View Length" Details on W3 .

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

 div { height:100vh; } 

Answer 5

Super simple and intuitive way to create responsive, square containers
Scalable percent heights with lining:

See Codepen

Basically, set the height to 0 and set the bottom padding to whatever percentage you want.

 .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>