1

I'm stuck with a Div layout. there's two major Divs which include children Divs; Container and bottom. The Container (Green Div) doesn't stretch to the end of its children. Here's a screenshot: enter image description here

I tried clear: both and position in different cases but didn't work.

Also need that horizontal gray Div stick to the bottom of its parents.

This is the code (although It looks different in JSFiddle from my FF/Chrome Browser): http://jsfiddle.net/7KB9z/

This is the result wanna achieve:

enter image description here

Code from the fiddle

This is the html

<div id="container">
    <div id="middle">
        <div class="right"></div>
        <div class="center"></div>
        <div class="left"></div>
        <div style="clear: both;"></div>
    </div>
    <div id="bottom">
        <div id="first">
    <div class="right"></div>
    <div class="center"></div>
    <div class="left"></div>
        </div>
        <div id="second">
    <div class="module"></div>
    <div class="banner"></div>
         </div>
    </div>
    <div style="clear: both;"></div>
</div>

This is the css

div#container {
    width: 1000px;
    height: 100%;
    margin: 45px auto; 
    background: green;
}
div#middle {
    width: 100%;
    height: 560px;
    margin-top: 20px;
}
div#middle .right {
    float: right;
    width: 205px;
    height: 100%;
    background: yellow;
}
div#middle .center {
    float: right;
    width: 455px;
    height: 100%;
    margin: 0 10px; 
    background: orange;
}
div#middle .left {
    float: left;
    width: 320px;
    height: 100%;
    background: blue;
}




/*Bottom section*/
div#bottom {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background: brown;
}
div#bottom #first {
    float: right;
    width: 100%;
    height: 400px;
    background: red;    
}
div#bottom #first .right {
    float: right;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #first .center {
    float: right;
    width: 325px;
    height: 100%;
    margin: 0 12px;
    background: pink; 
}
div#bottom #first .left {
    float: left;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #second {
    float: right;
    width: 100%;
    height: 100%;
    background: black;
    margin-top: 10px;
}
div#bottom #second .module {
    float: right;
    width: 325px;
    height: 100%;
    background: silver;
}
div#bottom #second .banner {
    float: left;
    width: 645px;
    min-height: 100px;
    vertical-align: bottom;
    background: silver;
}

Thank you

surfmuggle
  • 5,527
  • 7
  • 48
  • 77
DummyBeginner
  • 411
  • 10
  • 34
  • 1
    Out of curiosity why do you use `div#bottom #first .center` instead of only `#first .center`. Since every id must be unique both rules should have the same effect. If i made no mistake just by removing the `div` the [background color green stretches down (at least in chrome)](http://jsfiddle.net/hxCUb/) – surfmuggle Jan 03 '14 at 12:07
  • 1
    did you fix this? if not try giving `overflow:auto` to the parent container - it should make the box go around any child divs that are floated. If this doesn't work, you can try removing the `height:100%` from the container. As it looks like you are wanting 100% height for your child divs, you may want to look into using `display:table` and `display:table-cell` – Pete Jan 03 '14 at 12:11
  • @threeFourOneSixOneThree Seriously I don't know why I used `div#bottom #first .center` myself :D let me use the opportunity here, When should I use `div` before id (like `div#bottom`) and when shouldn't? (Just `#bottom`) – DummyBeginner Jan 03 '14 at 12:47
  • @Pete The `overflow:auto` didn't work and make scroll around the container. But removing `height:100%` worked. Even without changing `display` property. – DummyBeginner Jan 03 '14 at 12:49
  • 1
    `div#bottom` will be faster when doing a jquery selector whereas just `#bottom` will be faster when doing a css selector – Pete Jan 03 '14 at 12:52
  • @Pete So as I just do css selector here I should use `#bottom`. Thank you – DummyBeginner Jan 03 '14 at 13:12
  • 1
    @Pete: Do you have test cases to back that up? @DummyBeginner: I would never recommend that. The only reason in can think of is if you have two different pages where you would like to show the same content but with different formatting `nav #shoppingcart` versus `section #shoppingCart` but i would always prefer `#shoppingcart .navigation` and `#shoppingcart .preview`. – surfmuggle Jan 03 '14 at 13:15
  • @threeFourOneSixOneThree, I did a few googles on selector performance and there are plenty of results on stack overflow that will back that up – Pete Jan 03 '14 at 13:37

1 Answers1

3

Give position: relative to #second

and give position:absolute; bottom: 0 to #second.banner

code

    div#container {
    width: 1000px;
    min-height: 100%;
    margin: 45px auto; 
    background: green;
}
div#middle {
    width: 100%;
    height: 560px;
    margin-top: 20px;
}
div#middle .right {
    float: right;
    width: 205px;
    height: 100%;
    background: yellow;
}
div#middle .center {
    float: right;
    width: 455px;
    height: 100%;
    margin: 0 10px; 
    background: orange;
}
div#middle .left {
    float: left;
    width: 320px;
    height: 100%;
    background: blue;
}

div#bottom {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background: brown;
}
div#bottom #first {
    float: right;
    width: 100%;
    height: 400px;
    background: red;    
}
div#bottom #first .right {
    float: right;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #first .center {
    float: right;
    width: 325px;
    height: 100%;
    margin: 0 12px;
    background: pink; 
}
div#bottom #first .left {
    float: left;
    width: 325px;
    height: 100%;
    background: pink;
}
div#bottom #second {
    float: right;
    width: 100%;
    height: 100%;
    background: black;
    margin-top: 10px;
    position:relative;
}
div#bottom #second .module {
    float: right;
    width: 325px;
    height: 300px;
    background: silver;
}
div#bottom #second .banner {
    float: left;
    width: 645px;
    min-height: 100px;
    vertical-align: bottom;
    background: silver;
    position:absolute;
    bottom:0;
}

Js fiddle working example jsfiddle

edit regarding a comment question: The height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space.

Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the children, letting it push past the 100% only when it needs too. So use min-height:100%;

More info: detailed explanation

Community
  • 1
  • 1
Jorge Faianca
  • 791
  • 5
  • 11
  • i still don't see any effect...can u provide a working fiddle? – NoobEditor Jan 03 '14 at 11:55
  • It works for me, http://jsfiddle.net/7KB9z/4/ updated with static height in .module, 100% height doesnt go very well with fiddle tho – Jorge Faianca Jan 03 '14 at 11:58
  • Thanks. It worked for `#second.banner` and sticks to the bottom. But giving `relative` to `#second` makes no change – DummyBeginner Jan 03 '14 at 12:02
  • 1
    If you don't make #second relative, your banner div will be floating over the other divs. "An absolute positioned element is positioned relative to the first parent element that has a position other than static. " – Jorge Faianca Jan 03 '14 at 12:04
  • Thank you, In your update (http://jsfiddle.net/7KB9z/4/) I've noticed if remove `height: 100%` from `div#container`, The green `container` will extend to the end of its children, otherwise when I open "developer tool" in FF/Chrome and the height of page is reduced, The `container` would shrink and doesn't wrap the height of the children. Why? – DummyBeginner Jan 03 '14 at 12:21
  • 1
    I did misunderstanding your question sorry, Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the children, letting it push past the 100% only when it needs too. So use min-height:100%; the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space – Jorge Faianca Jan 03 '14 at 12:36
  • And you can read a really good explanation in here http://stackoverflow.com/questions/9446988/expanding-the-parent-container-with-100-height-to-account-for-floated-content – Jorge Faianca Jan 03 '14 at 12:39
  • Would you mind edit your post so I could choose it as the answer – DummyBeginner Jan 03 '14 at 13:25
  • There you go, hopefully you got it working now and understood it. Regards – Jorge Faianca Jan 03 '14 at 13:27