How to make floating inner divs the same height as the highest div
If you're not adverse to a spot of jQuery, you can use EqualHeight, it should do what you want
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>
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>
How to make floating divs the height of the tallest element for each row
You may want to look at flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox can be used to stretch child elements based on the parent's size.
Here's a quick test I did in jsfiddle
https://jsfiddle.net/7Lknyxqr/
.wrapper{
display: flex;
align-items: stretch;
flex-wrap: wrap;
height: auto;
width: 100%;
}
.block{
width: calc(50% - 20px);
background-color: #343;
margin: 10px;
}
Floating divs, equal height - fill space with additional div without overflow
Pure CSS solution
Here is a DEMO of that solution.
In this DEMO, you see multipple Row
s,
each Row
can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called ElementsHolder
, and can have any number of Elements
you want.
all the column in a row will always have the same height, and the last arrow in the row will fill that space.
In the DEMO you can see 3 Row
s.
The First Row
has the starting point, so no stretch needed there.
The Second Row
has 3 ElementsHolder
, without stating anything special in the markup, 2 of them will stretch to fill the gap.
The Third Row
has 2 ElementsHolder
, behave as expected.
notice that the stretching works regardless of the Element
s height. (some of them have 2 or 3 lines of text, and it works perfectly)
If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)
The solution is done by using the new CSS flex model.
the direction is set via flex-direction: row;
,
Each row has ElementsHolder
s that gets equal width.
each one of those ElementsHolder
is also a flex box, but this time his direction is opposite (flex-direction: column;
).
the child's of ElementsHolder
are Element
s & Arrow
s, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.
all of that is achieved using the flex
property with the appropriate values.
More about the flex-model can be found HERE
Let two divs have the same height
Demo
the simplest solution is to wrapper both the divs in a div and make it display flex;
html
<div class="wrapper">
<div id="div1">ABC</div>
<div id="div2">ABC DEF GHI JKL MNO</div>
</div>
css
.wrapper {
display: flex;
}
How to make div boxes with floats have the same height with dynamic content
If you need the formatting of a table, but you have to support older browsers that don't have support for display:table
, then use a table. It's pretty much that simple.
Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.
For instance, a table (or display:table
, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.
Related Topics
Two Divs Side by Side, One 100% Width Others Width Depended on Content
Div Table-Cell Vertical Align Not Working
Doing a Input Type="Text" with CSS3 and Fixed Image on the Background
Why Box-Sizing Is Not Working with Width/Height Attribute on Canvas Element
Media Queries and Device Orientation Change
Style Lower and Upper Fill in HTML5 Range Input
Syntax Highlighting in Jekyll Using Redcarpet
CSS: Div Containing No Height on Float Set
How to Make The Overflow CSS Property Work with Hidden as Value
CSS Floating Divs with Different Height Are Aligned with Space Between Them
How to Set Height Property for Span
Overflow: Hidden on Div and Body, Different Behavior
How to Push a Footer to The Bottom of Page When Content Is Short or Missing
How to Stretch The Background Image to Fill a Div