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>
Two floating divs side by side, same height
If you know that one of the two columns is always going to be taller than the other, then you can do something like this:
demo
Just give position: absolute
to the shorter column and make it stretch from top: 0
to bottom: 0
.
HTML:
<div class='container'>
<div class="containerLeft">
<h2>1.</h2>
<p>First, let's play a video.</p>
</div>
<div class="containerRight">
<img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" />
</div>
</div>
CSS:
.container { position: relative; }
.containerLeft { /* shorter column */
position: absolute;
top: 0; bottom: 0; left: 0;
width: 38%;
padding: 2%;
background-color: crimson;
}
.containerRight { /* taller column */
margin: 0 0 0 42%;
width: 58%;
background: dodgerblue;
}
If you don't know for sure which one of them is going to be taller, then you can simulate the fact that they are of equal height
by using a background gradient on their parent.
demo
HTML is the same, CSS becomes:
.container {
overflow: hidden;
background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);
background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);
background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);
background: linear-gradient(left, crimson 42%, dodgerblue 42%);
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
width:38%;
padding: 2%;
}
.containerRight { width: 58%; }
However, CSS gradients don't work in IE9 and older, so if you want a solution for IE8+, then you can try this
demo
which uses :before
and :after
pseudo-elements.
.container {
overflow: hidden;
position: relative;
}
.container:before,.container:after {
position: absolute;
z-index: -1;
top: 0; bottom: 0;
content: '';
}
.container:before {
left: 0;
width: 42%;
background: crimson;
}
.container:after {
right: 0;
width: 58%;
background: dodgerblue;
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
z-index: 2;
width:38%;
padding: 2%;
}
.containerRight { width: 58%; }
float left and right make 2 column to be same height
When using percent for height, also the ascendants need a height, all the way to the html
, unless one have a fixed height, i.e. viewport units vh
, shown in sample 2
Sample 1, with height: 100%
on the html, body
html,body { height: 100%;}
.wrap { height: 100%; overflow: hidden; width: 400px;}
.left { float: left; width: 50%; background: #fafafa; text-align: center;}
.right { float: right; background: white; width: 50%; text-align: center; height: 100%;}
<div class="wrap"> <div class="left"> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p> <p> left content is long </p>
</div> <div class="right">right content is not</div></div>
Make all floating DIVS same height
Set the wrapper to display: table
and set the columns to display: table-cell
(and remove the float)
So it will look like this:
.wrapper {
display: table;
...
}
.wrapper .column {
display: table-cell;
...
}
Make floating divs the same height
You could try instead of using float, use display: table-cell
. You might find some older browsers don't understand this rule however. See below:
#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
How to have 2 floating divs have the same height
You cannot do this via CSS alone using floated elements, unless you can guarantee the height of each column (which you generally can't, with such a fluid medium as the web). However, you do have options:
- Using
display: table-cell
: http://jsfiddle.net/8LdQk/3/. Unfortunately, this will not work in IE6 or 7. This blog post detailing its use might be helpful. - Using JavaScript: http://jsfiddle.net/8LdQk/5/.
- Using Dan Cederholm's classic faux-columns trick.
How to make two div´s next to each other have the same height?
You just need to add a parent div to the divs that you want to have same height.
parent div:
overflow: hidden;
child div:
float: left; padding-bottom: 500em; margin-bottom: -500em;
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.https://stackoverflow.com/a/1205485/2851845
body{ margin: 0;}
.area-header{ height:40px; background-color:#71A4C3; margin-bottom: 20px; margin-left:20px; margin-right:20px;}
#area-wrapper{ overflow: hidden; width: 100%;}
.area-menu, .area-content{ float:left; padding-bottom: 500em; margin-bottom: -500em;}
.area-menu{ width: 200px; background-color:#8BC6EA;}
.area-content{ width: 400px; background-color: LightSlateGrey; }
<body> <div id="area-header" class="area-header"> <h2>A Web Application!</h2> </div> <div id="area-wrapper"> <div id="area-menu" class="area-menu"> <ul id="menu"> <li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li> </ul> </div> <div id="area-content" class="area-content"> <div style="height:200px;background:red;"></div> </div> </div></body>
Related Topics
How to Add Border Outside The Margin Using CSS
How to Start New Row of CSS Table Cells Without a Row Wrapper Element
Compass-Style (Ruby) Encoding Error
How to Display Only a Certain Div Within an Iframe
Left Align Text and Right Align Image in CSS
Svg CSS Rounded Corner Not Working
How to Set Height of Element to Match Height of Another Element
Media Query Works on Mobile Firefox But Doesn't Work on Mobile Chrome
Vertical Rule (As Opposed to <Hr>) in CSS
Rails Application Doesn't Load CSS/Js/Images in Production-Environment
Change Cursor Over HTML5 Canvas When Dragging The Mouse
CSS for Double Height Text and Double Width Text in Font Style
How to Style The Default Placeholder Text on an HTML5 Input Type="Date" Element? in Chrome
CSS Layout Help - Stretch Div to Bottom of Page