CSS 2 Div Size Auto Same Height

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



Leave a reply



Submit