CSS "обертка" div цвет фона не появляется во втором div?

Цвет фона div "wrapper" не отображается во втором div, в то время как высота и ширина обоих div определяются, почему цвет фона не применяется по всей ширине и высоте, как определено в wrapper, и не применяется в div #leftSideContent.

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

Источник

5 ответов

Решение

Просто добавь overflow: hidden; на ваш #wrapper блок декларации.

Источник

Если вы хотите #wrapper цвет, чтобы появиться под #leftsidecontentвсе, что вам нужно сделать, это добавить overflow: hidden в #wrapper, Это происходит, когда вы перемещаете дочерний элемент.

Источник

Есть только одна проблема с кодом: мне нужно определить высоту #wrapper div, которая была единственной ошибкой, теперь div-обертка CSS будет:

 #wrapper
        {
            width:700px;
            margin-left:300px;
            margin-right:300px;
            background-color:#deb887;
        }
Источник

Вы не очистили свой поплавок. добавлять <br clear="all"/> для старого HTML где-то раньше #wrapper закрывается. ИЛИ, используйте CSS и примените overflow: auto; в #wrapper,

Метод CSS: http://jsfiddle.net/GeSQ2/1/ Метод HTML: http://jsfiddle.net/GeSQ2/2/

Источник

Это потому что #leftSideContent находится за пределами #wrapper,

добавлять overflow: auto в #wrapper так что он знает, что что-то всплывает.

Источник
Другие вопросы по тегам