Geek Answers Handbook

How to make sure that two divs have the same height?

Let's say I have 2 divs inside the wrapper side by side.

<div id="wrapper"> <div id="primary"></div> <div id="secondary"></div> </div> #primary { width:50%; float: left; } #secondary { width: 50%; }

How can I make sure that the secondary div is always the same height as the primary div

+4
source share
7 answers

Unfortunately, there is no ideal method for this without using Javascript, since realistically two divs do not know anything about each other.

What your options depend on what exactly you were looking for visually.

A quick google search brought this, which looks pretty promising: http://www.vanseodesign.com/css/equal-height-columns/

If you can focus on more modern browsers, you can avoid using flexbox. See this post for examples, etc.: http://css-tricks.com/fluid-width-equal-height-columns/

0
source

try using javascript, taking the value of the primary div for the assignment in the second div.

Another way is trying to use a px or em pixel, so you will always have the same height as

+4
source

There's a pretty cool trick on how to do this.

jsFiddle Demo

First you apply padding-bottom: 100%; to each side by side div.

Then you apply margin-bottom: -100%; to each side by side div. Pay attention to -

Finally, you add overflow:hidden; in the div in which they are located.

Presto! True happiness is yours.

HTML:

 <div id="wrapper"> <div id="primary">Lorem ipsum dolor set amet. </div> <div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div> </div>

CSS

 #wrapper {overflow:hidden;} #primary {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;} #secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}

Literature:

http://www.ejeliot.com/blog/61

+3
source

If you specify a height value for your container, say #wrapper {height:300px;} , you can just set the height value #primary and #secondary to 100% . But if you do not want to specify a height value, you can use the display:table option, as in the example here http://jsfiddle.net/qiqiabaziz/LFEF5/

+2
source 
 Your CSS .table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;} .row{display:table-row;} .cell{display:table-cell;text-align:center;width:50%;} Your HTML <body> <div class="table"> <div class="row"> <div class="cell">content for this div </div> <div class="cell">content for this div </div> </div> </div> </body>
+1
source

Make two divs with equal height (either declaring their heights in px, em, or%) and declare them overflow : auto , so if the content in either or both divs increases, scrolling is provided automatically and their heights don't get bothered.

0
source

just make sure the parent div (div wrapper) has a width in pixels

 <div id="wrapper"> <div id="primary"></div> <div id="secondary"></div> </div> #wrapper { width:300px; } #primary { width:50%; float: left; } #secondary { width: 50%; }

this will work if the primary div has no field and / or padding

0
source

More articles:


All Articles