Цвет фона на дочернем элементе div во всю ширину

Я пытаюсь установить цвет фона для div, который растянут (с использованием отрицательных полей) на всю ширину его самого внешнего родительского div.

Вот упрощенный пример: http://jsfiddle.net/U5dnd/

Белый div .featured-wrapper покрывает всю ширину черного div .site, но его фоновый цвет — нет. Я полагаю, что поля прозрачны.

Есть ли способ сделать весь .featured-wrapper белым, включая его (отрицательные) поля? (Или есть другой способ сделать это?)

Спасибо!


css margin margins
person Mattvic    schedule 25.09.2012    source источник
comment
я не понимаю вас должным образом, но jsfiddle.net/swamimayank/5JH6w вы хотите?   -  person NullPoiиteя    schedule 25.09.2012
comment
С визуальной точки зрения я хочу, чтобы белый дочерний элемент в примере покрывал весь черный фон слева направо.   -  person Mattvic    schedule 25.09.2012

Ответы (2)


arrow_upward
0
arrow_downward

Проверь это

JS-скрипт

CSS:

.site {
    background-color:black;       
    padding: 0 40px;
    height:300px;
    width:320px;
}
.site-content {
    width:100%;
    overflow:hidden;
}
.wrapper {
    overflow:hidden; 
    background-color:red; 
    height:100%;
}
.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0 0 -40px;
    position: absolute;
    width: 399px;
}

HTML:

<div id="page" class="site">

    <div id="main" class="wrapper">

        <div id="primary" class="site-content">
            <div class="featured-wrapper">
                <p>This is the featured wrapper</p>
            </div>
    </div>
   </div>

</div>
person Narendra    schedule 25.09.2012
comment
Дайте мне знать, если какие-либо изменения необходимы. - person Narendra; 25.09.2012

arrow_upward

arrow_downward

person    schedule
comment
Спасибо, это прекрасно работает в JSfiddle, хотя в моих шаблонах вызывает несколько других головных болей ;) Похоже, что абсолютное позиционирование — это правильный путь, поэтому я пойду по этому пути. - person Mattvic; 25.09.2012