Wrapping a containing div with another div

Question

I don't know how to summarize my situation, but here's the simplified code showing the problem (index.html) :

<html>
   <body>
      <div id="wrapper" class="divide">
          <div id="top" class="divide">
                ....(all of its contents)....
          </div>
          <div id="content" class="divide">
              <div id="left">
                  ....(all the contents)....
               </div>
               <div id="right">
                  ....(all the contents)....
               </div>
           </div>
       </div>
       <div id="footer">
       </div>
    </body>
 </html>

(style.css)

.divide{
   margin-left:auto;
   margin-right:auto;
   width:960px;
 }

 body {
   background-color: #666600;
 }
 #left {
     ......
     ......
     float: left;
 }

  #right {
     ......
     ......
     float: left;
 }

 #wrapper{
    background-color:#ffffff;
  }

So here I want the "wrapper" div background to be white in color, and the body background surrounding it to have another color (in here I put the brownish color). This works for the "top" div, but not the "content" div (thus, all of its children). The "content" div has the same background color as body, which doesn't make sense to me because the "wrapper" div does contain "content" div.

In other word, the "wrapper" div seems doesn't reach the "content" div and all of its children. Is there any workaround for this problem? Inform me if you all need additional information. Thanks for any help!

NOTE: As our helpful people pointed out, the floating properties in the div element does cause the above problem. I did not realize that. That's why I didn't put the floating properties in the first place. So I just edited the above code so that we know what's really causing it. Peace!

there was some floating properties in the code. i thought it wasn't really a problem until you guys pointed it out. thanks! — vandershraaf, Jul 29 '11 at 20:14

thirtydot · Accepted Answer · 2011-07-29T20:15:32.013

4

Do you have any floated elements, such as #left and #right?

If so, you need to clear your floats.

One way to do that is to add overflow: hidden to #wrapper.

You should also fix a small mistake in your HTML: </left> to </div>.

edited Jul 29 '11 at 20:15

answered Jul 29 '11 at 20:00

thirtydot

224,678
48
389
349

it wasnt me. i havent checked your solution yet – vandershraaf Jul 29 '11 at 20:06
Same..dunno why we got downvoted. +1 to counter :D you had my answer neway, but beat me by a sec – Nick Rolando Jul 29 '11 at 20:08
@AlienWebguy: I suspect that he's reduced his CSS down to what he *thinks* is the relevant part, like he's done with his HTML. Look at the names of the `div`s: `left` and `right`. I might be wrong - if I am, I'll remove my answer. – thirtydot Jul 29 '11 at 20:14
there was some floating properties in the code. i thought it wasn't really a problem until you guys pointed it out. thanks! – vandershraaf Jul 29 '11 at 20:14
@thirtydot hahah i just noticed you answered my very same question: http://stackoverflow.com/questions/5956707/problem-with-div-bg-color-styl-in-ff-chrome good stuff :p – Nick Rolando Jul 29 '11 at 20:42
2

@Shredder: I answer [lots](http://stackoverflow.com/tags/css/topusers) of CSS questions :) – thirtydot Jul 29 '11 at 20:50

Nick Rolando · Answer 2 · 2011-07-29T20:15:32.137

3

If you float your content divs, you might be having a problem with not clearing the floats. Try adding overflow:auto to your wrapper div

edited Jul 29 '11 at 20:15

answered Jul 29 '11 at 20:01

Nick Rolando

25,879
13
79
119

i did not do it, that's for sure – vandershraaf Jul 29 '11 at 20:04
I did. Do you see the word `float` in the CSS? – AlienWebguy Jul 29 '11 at 20:09
@AlienWebguy Perhaps the OP left it out. Its pretty much a given when you're doing div columns... the given code wouldn't allow him to make left/right div columns, so you can assume he left it out. – Nick Rolando Jul 29 '11 at 20:10
Yep he admitted to being a moron. Edit your answer and I'll remove the downvote. – AlienWebguy Jul 29 '11 at 20:12
@AlienWebguy Wtf do you want me to edit. This is probably the answer to his problem – Nick Rolando Jul 29 '11 at 20:14
Just change one letter, I don't care if you do or not but if you want me to remove the downvote, you have to edit your answer cuz it's locked. – AlienWebguy Jul 29 '11 at 20:14
@vandershraaf thx :D I had the exact same problem and turned to SO haha http://stackoverflow.com/questions/5956707/problem-with-div-bg-color-styl-in-ff-chrome. +1->Question – Nick Rolando Jul 29 '11 at 20:26
1

@vandershraaf and what do you know, thirtydot answered it hahah! – Nick Rolando Jul 29 '11 at 20:43

score 0 · Answer 3 · answered Jul 29 '11 at 19:59

0

I put your code into JSFiddle and got this: http://jsfiddle.net/XPLWR/, it looks fine to me.

answered Jul 29 '11 at 19:59

ayyp

6,590
4
33
47

so there should be any other thing causes this? – vandershraaf Jul 29 '11 at 20:01
1

@vandershraaf Most likely a `float` on one of the `div`s inside the wrapper. If an element is floated it's removed from the regular flow and thus won't cause the wrapper to extend further. One solution would be to add `clear:both;` to your `content` and `header` IDs. – ayyp Jul 29 '11 at 20:05
@ Andrew Peacock, you're totally right. i'm still a newbie in this css stuff, so thanks for pointing it out. – vandershraaf Jul 29 '11 at 20:18

Wrapping a containing div with another div

3 Answers3