Wrapping a containing div with another div_问答_开发者

Wrapping a containing div with another div

开发者 https://www.devze.com 2023-03-24 11:32 出处：网络

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

相关专题：css

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">
           开发者_JAVA百科     ....(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!

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>.

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

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