Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

html

css

html-table

flexbox

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
Sign in to Comment

Related questions

Add border-bottom to table row <tr>
How to make a div fill a remaining horizontal space?
Should I use px or rem value units in my CSS? [closed]
Is it valid to replace http:// with // in a <script src="http://...">?
How to line-break from css, without using <br />?
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
How to set input type date's default value to today?
What are the recommendations for html <base> tag?
Flexbox not giving equal width to elements
How to force a line break in a long word in a DIV?
Convert HTML to PDF in .NET [closed]
How can I expand floated child div's height to parent's height?
How to center an element horizontally and vertically
Multiple lines of input in <input type="text" />
How to mark-up phone numbers?
Binding select element to object in Angular
What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?
Alternate table row color using CSS?
What is the boundary in multipart/form-data?
How to open link in a new tab in HTML?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!