CSS "wrapper" div background color not appearing in 2nd div?

StackOverflow https://stackoverflow.com/questions/19937491

题

"wrapper" div background color not appearing in 2nd div while height and width of both div is defined why background color is not applied in whole width and height as defined in wrapper its not applied in #leftSideContent div 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>page practice</title>
    <style>
        body
        {
            background-image: url("stripe_f4b448da7a886ae96535955b68f80e83.png");
            background-repeat: repeat;
        }
        #wrapper
        {
            width:700px;
            margin-left:300px;
            margin-right:300px;
            background-color:#deb887;
        }
 #firstAside
        {
            border:8px aquamarine solid;
            margin-top: 20px;
            margin-left: 20px;
            width:200px;
            height:375px ;

        }
        #secondAside
        {
            border:8px aquamarine solid;
            margin-top: 20px;
            margin-left: 20px;
            width:200px;
            height:100px ;

        }
nav
        {
            margin-top:10px;
            margin-left: 3px;
        }
        #leftSideContent
        {
            float: left;
            width: 200px;
            height: 700px;
        }
</style>
</head>
<body>
        <div id="wrapper">
        <header>
            <p>CSS Zen Garden</p>
        </header>
        <div id="leftSideContent">
        <aside id="firstAside">
          <b>Select A Design</b>
          <nav>
            <ul>
              <li><a href="#">JAMES KERLEY</a> <span> by </span><a href="#">ABCD</a></li>
              <li><a href="#">JAMES KERLEY</a> <span> by </span><a href="#">ABCD</a></li>
            </ul>
          </nav>
          </aside>
        <aside id="secondAside">
            <b>Archives</b>
            <nav>
            <ul>
                <li><a href="#">JAMES KERLEY</a></li>
                <li><a href="#">JAMES KERLEY</a></li>
             </ul>
            </nav>
        </aside>
</div>
          <div id="content"><p> data</p></div>
         </div>

</body>
</html>

fiddlelink

有帮助吗？

解决方案

Just add overflow: hidden; to your #wrapper declaration block.

其他提示

there is only one problem with code: i need to define height of #wrapper div that was the only mistake now wrapper div CSS will be :

 #wrapper
        {
            width:700px;
            margin-left:300px;
            margin-right:300px;
            background-color:#deb887;
        }

If you want the #wrapper color to appear under #leftsidecontent, all you have to do is add overflow: hidden to #wrapper. This happens when you float a child element.

You haven't cleared your float. Add <br clear="all"/> for older HTML somewhere before #wrapper closes. OR, use CSS and apply overflow: auto; to #wrapper.

CSS Method: http://jsfiddle.net/GeSQ2/1/ HTML Method: http://jsfiddle.net/GeSQ2/2/

It's because #leftSideContent is floated outside the #wrapper.

Add overflow: auto to #wrapper so that it knows that there is something floating out.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top