Expand parent div height to childs

Question

I have a problem with footer positioning. It doesn't go to the bottom/last.

So, I have a container div which has 3 divs - float:right , float:left and the center one (which has position:absolute) that comes between the two floated divs.

The center one must have fixed width and height because it's an image.

In that center div I have another div with a lot of content.

The problem is, because the center div has fixed width and height, it doesn't take the childs div height.

So my problem is how to put the footer that it comes last (after the container)?

Note - with JQuery I put the width of the floated divs because they take 100%-980px width.

This is how it looks like.

I tried putting to the center div overflow:auto,overflow:overlay,margin-left:auto;margin-right:auto;.

Answer 1

You need to set this property of the center-div: height:auto (you could also add a minimum height: min-height:400)

About your second question with the footer, this is much more complicated. You must do this:

<div id="content">
    <div id="content_left">
    </div>
    <div id="content_center">
    </div>
    <div id="content_right">
    </div>
    <div id="footer">
    </div>
</div>

I'll give you now the full CSS (because it's not so easy):

.content {position:relative; overflow:hidden;} //hidden overflow just a hack for common issues...
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:auto; float:right} //for tests you can also set a fixed height

This solution is also according to other threads on Stackoverflow: Align DIV's to bottom or baseline, How to align content of a div to the bottom?

But, if you experience problems with that, you may do this (my preferred solution):

<div id="content">
    <div id="content_left">
    </div>
    <div id="content_center">
    </div>
    <div id="content_right">
    </div>
</div>
<div id="footer">
</div>

And its CSS:

.content {position:relative; overflow:hidden;} //hidden overflow is just a hack
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:xxx; float:left} //you can use any height...

Note that all above solutions works only if you set all the "contents" to float, it doesn't work with absolute values! I found this here: http://wiki.answers.com/Q/How_can_a_parent_DIV_wrap_around_child_DIVs_which_are_floating_left_or_right

This is due to an issue with divs: It's not possible to "tell" a parent div the size! So childs like "content_center" or "content_right" won't tell the "content" how long they are and how long "content" must be. So it's impossible to tell the footer where to align, if you use absolute values for the childs.

So your second question, although it looks trivial, is a very important question, and not easy to solve.

IMPORTANT UPDATE:

I tried to find a solution with absolute now. The problem is, that absolute and fixed are taken out of the regular (text)flow, so their size can't influence the size/positioning of any other element anymore. But we also have to understand that an absolute element still controls all its childs, so we should rather set the childs as relative than the parent (here: "content")! So I finally found the solution, and it's quite weird, because it's almost the opposite thing I suggested above, but that solution was influenced by the posting of others, while following solution is "my own" one (I added a header for demonstration purpose):

<div id="header">
</div>
<div id="content">
    <div id="content_left">
    </div>
    <div id="content_center">
    </div>
    <div id="content_right">
    </div>
    <div id="footer">
    </div>
</div>

The CSS (the "header" clearly shows, that "content" inherites all positioning to its childs like "content_left", "content_right", aso.):

.header {position:absolute; left:0; top:0; height:100; width:100%}
.content {position:absolute; left:0; top:100; height:auto; min-width:700} //min-width is only voluntary, but quite useful
.content_left {position:relative; left:0; top:0; width:200; height:auto;} //height:auto is important to adapt the height from containing text!
.content_center {position:relative; left:200; top:0; right:200; width:auto; height:auto;} //in the middle element, also auto-width is important!
.content_right {position:fixed; right:0; top:0; width:200; height:1000;} //we set a fixed position, but that won't influence the footer anymore!
.content_footer {margin:0 0 60 0; position:relative; left:0; bottom:-60; width:100%; height:150;} //a fixed height is also okey...but relative position is needed!
//you still need to add margin:0; border:0; padding:0 or similar values for some elements to get a good layout

The important point here is, that you can decide which child element will be the longest one, and set this element's position:relative, while the other may have absolute or fixed. But if you don't know which element will be the longest, all child's positions need to be set as relative. Anyway, I suggest to set all childs to relative (beside fixed if needed), because their parent "content" will set their absolute height-position already correctly, so there's no need for any absolute at all.

I'm repeating myself: Above I wrote it's not possible to tell a parent div the size...actually it's possible, but not if the values absolute and fixed are used. Only if you use the browser standart value (static) or relative, the parent div will be informed about the size of its childs, an therefore the footer is set correctly at the bottom of the page.

Well, my solution works everywhere...even in IE (tested 6.0 and 8.0!) due to the hack margin:0 0 60 0 where the value 60 should be the positive value of bottom:-60. Now we finally got the non-floating crossbrower-solution. ;)

Answer 2

The problem you're experiencing is that certain CSS properties cause elements to be "removed from the flow" of the document (see the W3C Visual formatting model). Parent elements naturally grow to fit the height of children elements, however, floated and absolutely positioned elements are removed from the document flow. As mentioned in a few comments, setting overflow: auto; or overflow: hidden; on the parent element re-establishes a bounding box around floated elements. This means you can float elements within the parent container, then set overflow: hidden; on the parent element, and the parent element will contain the floats. However, this doesn't work for absolutely positioned elements: the absolutely positioned box is "removed from the normal flow entirely (it has no impact on later siblings)". The only exception is that the entire document will try and grow to display any positioned elements (give an element position: absolute; top: 3000em; and the page scrollbar will grow to allow you to scroll to that element). I don't know of any way to trigger this for elements other than the document.

Back to your intended effect… If you don't need IE7 support, you can use display: table; table-layout: fixed; to achieve a centered column with a fixed width and two columns of variable width on either side.

jsFiddle Demo

In the near future, this will also be possible using the CSS "flexbox" properties. Flexbox will allow for some nifty new features, including horizontal and vertical centering, changing the order of rendered elements, and setting "flex" values for how much of the remaining variable width an element should take. However, the standard is currently going through a period of flux, and the old standard (enjoying moderate support) is being replaced by a new standard (with little to no support). See "Old" Flexbox and "New" Flexbox and the accompanying demo. Considering the glacially slow progress of web standards implementation, I don't expect to see this in use for a few years unless a truly masterful polyfill is produced.

Answer 3

After reading your question again an again i come to conclusion and create the below fiddle using your code and embed a sample image for you desired size.

Please let me know if i am wrong while understanding your question. So i can work around according your needs.

fiddle: http://jsfiddle.net/ah3nr/6

Demo: http://jsfiddle.net/ah3nr/6/embedded/result/

My approach:

I have remove the position:absolute from center div and added new div for image and relate them both using css layer techniques.

Updated css:

.sectionDownContainer {
    width: 980px;
    /*height:270px;*/
    border:1px solid red;
    /*position: absolute;*/
    position:relative;
    top: -32px;
    z-index: 1;
}
/*.sectionDownMenu {
    margin-left: 50px;
    margin-top: 1px;
    display: block;
}
*/

#image_container {
    position:relative;
    width:980px;
    height: 270px;
    margin-top:-2px;
    z-index:2;
}

.sectionDownContent {
    width: 640px;
    margin-top: -190px;
    margin-left: 50px;
    position: relative;
    z-index:5;
    color:#000;
    font-weight:bold;
}

Screenshot:

Answer 4

Try this for the parent. overflow:auto;

Also refer to this stack overflow post: Expanding a parent <div> to the height of its children