How to set div to outer height of children?

css, html

Solution

I guess you are looking like this :- DEMO

Give the `overflow:hidden` to your banner class for achieving the desired result..

CSS

 .banner {
    border-left: 1px solid #008000;
    border-right: 1px solid #008000;
    overflow: hidden;
}

Problem

I have the following situation and a don't want to use JS for this: There is a header (blue) then a div which might contain content (if not it should collapse completly) and then the body (gray). Now I want to div with the green border left and right to fill the whole gap between the header and the body. The gap is caused by `margin: 10px;` on the div with the red border. The only "solution" I have found so far is to set `padding: 1px 0;` to the div with the green border (see commented line in fiddle). Is there any better solution to force the div or the border to cover the whole height occupied by the child and collapse completly if there is no child? I have no control over the content inside the div, so not using margin is not a solution. Fiddle: http://jsfiddle.net/w5NW4/1/

Original source