Make outer div be automatically the same height as its floating content
You can set the outerdiv
's CSS to this
#outerdiv {
overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}
You can also do this by adding an element at the end with clear: both
. This can be added normally, with JS (not a good solution) or with :after
CSS pseudo element (not widely supported in older IEs).
The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.
You can also try floating the parent container, but depending on your design, this may be impossible/difficult.
Height of outer div not expanding with inner div
You must add
<div style="clear:both;"></div>
at the end of floating div to fix this issue. see
here
Problem happens when a floated element is within a container box and element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
clear:both
clearfix
How to make a floated div 100% height of its parent?
For #outer
height to be based on its content, and have #inner
base its height on that, make both elements absolutely positioned.
More details can be found in the spec for the css height property, but essentially, #inner
must ignore #outer
height if #outer
's height is auto
, unless #outer
is positioned absolutely. Then #inner
height will be 0, unless #inner
itself is positioned absolutely.
<style>
#outer {
position:absolute;
height:auto; width:200px;
border: 1px solid red;
}
#inner {
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
However... By positioning #inner
absolutely, a float
setting will be ignored, so you will need to choose a width for #inner
explicitly, and add padding in #outer
to fake the text wrapping I suspect you want. For example, below, the padding of #outer
is the width of #inner
+3. Conveniently (as the whole point was to get #inner
height to 100%) there's no need to wrap text beneath #inner
, so this will look just like #inner
is floated.
<style>
#outer2{
padding-left: 23px;
position:absolute;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2{
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
text
</div>
I deleted my previous answer, as it was based on too many wrong assumptions about your goal.
make div's height expand with its content
You need to force a clear:both
before the #main_content
div is closed. I would probably move the <br class="clear" />;
into the #main_content
div and set the CSS to be:
.clear { clear: both; }
Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:
body {
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #3F51B5;
color: #fff;
}
section.content {
flex: 1;
}
footer {
background-color: #FFC107;
color: #333;
}
<div class="flex-container">
<header>
<h1>
Header
</h1>
</header>
<section class="content">
Content
</section>
<footer>
<h4>
Footer
</h4>
</footer>
</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%; }
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>
Grow height of parent div that contains floating nested divs
If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:
.parent {
overflow:hidden;
width: 100%;
}
Read this article for more: http://www.quirksmode.org/css/clearing.html.
How might I force a floating DIV to match the height of another floating DIV?
Wrap them in a containing div with the background color applied to it, and have a clearing div after the 'columns'.
<div style="background-color: yellow;">
<div style="float: left;width: 65%;">column a</div>
<div style="float: right;width: 35%;">column b</div>
<div style="clear: both;"></div>
</div>
Updated to address some comments and my own thoughts:
This method works because its essentially a simplification of your problem, in this somewhat 'oldskool' method I put two columns in followed by an empty clearing element, the job of the clearing element is to tell the parent (with the background) this is where floating behaviour ends, this allows the parent to essentially render 0 pixels of height at the position of the clear, which will be whatever the highest priorly floating element is.
The reason for this is to ensure the parent element is as tall as the tallest column, the background is then set on the parent to give the appearance that both columns have the same height.
It should be noted that this technique is 'oldskool' because the better choice is to trigger this height calculation behaviour with something like clearfix or by simply having overflow: hidden on the parent element.
Whilst this works in this limited scenario, if you wish for each column to look visually different, or have a gap between them, then setting a background on the parent element won't work, there is however a trick to get this effect.
The trick is to add bottom padding to all columns, to the max amount of size you expect that could be the difference between the shortest and tallest column, if you can't work this out then pick a large figure, you then need to add a negative bottom margin of the same number.
You'll need overflow hidden on the parent object, but the result will be that each column will request to render this additional height suggested by the margin, but not actually request layout of that size (because the negative margin counters the calculation).
This will render the parent at the size of the tallest column, whilst allowing all the columns to render at their height + the size of bottom padding used, if this height is larger than the parent then the rest will simply clip off.
<div style="overflow: hidden;">
<div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
<div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>
You can see an example of this technique on the bowers and wilkins website (see the four horizontal spotlight images the bottom of the page).
Related Topics
Why Does Width/Height Work on an Inline Img Element
Which CSS Selector Can Be Used to Select a Flex Box Item in Wrapped State
How to Expand a Child Div to 100% Screen Width If the Container Div Is Smaller
Margin-Top Only When the Flex Item Is Wrapped
Inject CSS with Chrome Developer Tool
Use Initial Width for Element Not Working in Ie
Customise Tumblr's *New* Like Button Iframe {Likebutton}
How to Set a Specific CSS Class to a Widget in Gtk3? (C)
Setting Up Line-Height via Tinymce
Style an Ordered List with Cyrillic Letters
Scale HTML5 Video and Break Aspect Ratio to Fill Whole Site
Responsive Bootstrap Jumbotron Background Image
Twitter Bootstrap: Center Text on Progress Bar
CSS Selectors Ul Li a {...} VS Ul > Li > a {...}