Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I keep two side-by-side divs the same height?

I have two div elements side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. If one grows because text is placed into it, the other one should grow to match the height. I can't figure this one out though. Any ideas?

<div style="overflow: hidden">     <div style="         border: 1px solid #cccccc;         float: left;         padding-bottom: 1000px;         margin-bottom: -1000px;     ">         Some content!<br />         Some content!<br />         Some content!<br />         Some content!<br />         Some content!<br />     </div>      <div style="         border: 1px solid #cccccc;         float: left;         padding-bottom: 1000px;         margin-bottom: -1000px;     ">         Some content!     </div> </div>
like image 567
NibblyPig Avatar asked Jun 08 '10 13:06

NibblyPig


People also ask

How do I make two divs side by side the same height?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.

How do I make all divs the same size?

Basically what you do is make both divs/columns very tall by adding a padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100% . It is better explained by Ed Eliot on his blog, which also includes many examples.

How do you make all columns the same height in CSS?

If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr); instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout. More on CSS Grid on MDN or css-tricks. It's clean, readable, maintainable, flexible and also that simple to use!


1 Answers

Flexbox

With flexbox it's a single declaration:

.row {   display: flex; /* equal height of the children */ }  .col {   flex: 1; /* additionally, equal width */      padding: 1em;   border: solid; }
<div class="row">   <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>   <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div> </div>

Prefixes may be required for older browsers, see browser support.

like image 116
Pavlo Avatar answered Oct 24 '22 21:10

Pavlo