How do I keep two side-by-side div elements the same height?
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>
CSS 2 div size auto same height
I would just wrap both DIVS, inside another div, and have them bump up on the parent DIV, then resize the parent
Something like this.... then use CSS to format them
<div id=parent>
<div id=child>
Content....
</div>
<div id=child>
Content....
</div>
</div>
some other solutions could be listed here
http://www.ejeliot.com/blog/61
How can I make two divs the same height where one of them has to keep a square aspect ratio?
Use this for .image-large
and it will be fixed:
&.image-large {
height: 0;
padding-bottom: calc(50% - 12px);
}
And the reason is that column height is decided based on content height or the size of tallest column in the same row. (I mean the visible row that column resides in, not the row
tag). Since your col-4
columns have a content with height (which is provided by padding), the other one automatically becomes same as it. In the last row however, the column has no reference height to inherit, and that's why the image inside it can't take more than 50px height which is set as the minimum. What I did is giving the images in large columns a height in a similar manner you gave height to the smaller images. (Extra 12 pixel was there because of 24px gap between columns, that's why I subtracted that)
How to have two sub-divs the same height as each other
Flexbox can do that:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid-row {
display: flex;
}
.grid-column-half {
border: 1px solid grey;
width: 50%;
padding: 10px
}
.tinted-container {
height: 100%;
background: pink;
}
<div class="grid-row">
<div class="grid-column-half">
<div class="tinted-container">
<p>Taller</p>
<p>column</p>
<p>on</p>
<p>left</p>
</div>
</div>
<div class="grid-column-half">
<div class="tinted-container">
<p>This container should be the same height as the other one.</p>
</div>
</div>
</div>
HTML/CSS: Making two floating divs the same height
You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>
Related Topics
Why Is 100% Height Not 100% of the Browser Height
CSS - Hide Options from Select Menu on iPhone & Safari
Create Bottom Responsive Arrow
What CSS Should I Use to Get a Border Around an Option Tag in Both Firefox and Ie
How to Make Nice Looking Matrix of Buttons with Bootstrap 3
How to Margin the Body of the Page (Html)
Creating a Sidebar Within a Flexbox with CSS
Horizontally and Vertically Center a Pre Tag Without the Use of Tables
Highlighting the Current Page in a List of Links Using CSS/Html
Font Awesome Icons Disappear After Refresh in Chrome
Horizontal Border Across Entire Row of CSS Grid