Не могу применить background-color для div-a?

Question

[maestro07]

серый цвет для последней секции (super easy to customize)

<section class="overview">
        <div class="container">
            <div class="list">
                <h3>product overview</h3>
                <h1>List of amazing features</h1>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_monitor.png" alt="monitor">
                    </div>
                    <h2>Responsive</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_settings.png" alt="monitor">
                    </div>
                    <h2>Customizable</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_like.png" alt="monitor">
                    </div>
                    <h2>Lovely design</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_phone.png" alt="monitor">
                    </div>
                    <h2>Mobile Friendly</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
            </div>
        </div>
        <hr>
        <div class="details">
            <div class="container">
                <div class="details_left">
                </div>
                <div class="details_right">
                    <h3>dip into the details</h3>
                    <h1>Beautiful on every device</h1>
                    <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</p>
                    <span class="first_item">Awesome design</span>
                    <span class="second_item">Fully responsive</span>
                    <span class="third_item">Retina ready</span>
                    <span class="fourth_item">Tons of features and easy to use</span>
                </div>
            </div>
        </div>
		<div class="clear_left"></div>
        <div class="grey">
        	<div class="container">
        		<div class="grey_left">
                    <h3>dip into the details</h3>
                    <h1>Super easy to customize</h1>
                    <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
                </div>
        		<div class="grey_right"></div>
        	</div>
        </div>
    </section>

.list {
    text-align: center;
    padding-top: 65px;
    padding-bottom: 100px;
}

.list h3 {
    text-transform: uppercase;
    font-family: "SourceSansProBold", sans-serif;
    font-size: 14px;
    color: #008ed6;
    letter-spacing: 1px;
}

.list h1 {
    font-family: "SourceSansProSemiBold", sans-serif;
    font-size: 36px;
    margin-top: 20px;
    position: relative;
    
}

.list h1::after {
    content: '';
    position: absolute;
    background: url(../img/bottom_line.png) no-repeat;
    height: 4px;
    width: 4%;
    display: block;
    bottom: -40px;
    left: 48.5%;
}


.list_item {
    width: 230px;
    margin-top: 73px;
    display: inline-block;
    padding: 0 20px;    
}

.list_item h2 {
    font-family: "SourceSansProRegular", sans-serif;
    font-size: 24px;
    margin-top: 33px;
}

.list_item p {
    font-family: "SourceSansProRegular", sans-serif;
    font-size: 18px;
    color: #999999;
    padding-top: 17px;
}

.img_wrap {
    height: 90px;
    width: 90px;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    margin: 0 auto;
}

.img_wrap img{
    margin-top: 31px;
}

.overview hr {
    color: #ededed;
    size: 1px;
}

.details {    
    padding-top: 65px;
    padding-bottom: 75px;
}

.details_left {
    width: 40%;
    height: 600px;
    float: left;
    background: url(../img/iphones_bg.png) no-repeat;
    background-size: 420px;
}

.details_right {
    float: right;
    width: 60%;
    padding-top: 45px;
}

.details_right h3 {
    padding-left: 110px;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "SourceSansProBold", sans-serif;
    color: #008ed6;
    padding-bottom: 15px;

}
.details_right h1 {
    padding-left: 110px;
    font-size: 36px;
    font-family: "SourceSansProSemiBold", sans-serif;
    position: relative;
    margin-bottom: 68px;
}

.details_right h1::after {
    content: '';
    position: absolute;
    background: url(../img/bottom_line.png) no-repeat;
    height: 4px;
    width: 6%;
    display: block;
    bottom: -23px;
}

.details_right p {
    padding-left: 110px;
    letter-spacing: 1px;
    font-size: 18px;
    color: #b4b4b4;
    padding-bottom: 40px;
}

.details_right span {
    padding-left: 135px;
    display: block;
    font-size: 18px;
    font-family: "SourceSansProRegular", sans-serif;
    position: relative;
}

span.first_item::before,
span.second_item::before,
span.third_item::before,
span.fourth_item::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 17px;
    top: 5px;
    left: 110px;
}

span.first_item::before {
    width: 20px;
    background: url("../img/logo_cup.png") no-repeat;
}

span.second_item::before {
    background: url("../img/logo_mouse.png") no-repeat;
    left: 113px;
}

span.third_item::before {
    background: url("../img/logo_energy.png") no-repeat;
    left: 113px;
}

span.fourth_item::before {
    width: 20px;
    background: url("../img/logo_speedometr.png") no-repeat;
}

.grey {
    background: #f2f2f2;
}

.grey_left {
    float: left;
    width: 35%;
    padding-top: 130px;
}

.grey_right {
    float: right;
    width: 65%;
    height: 600px;
    background: url(../img/iphone_bg.png) no-repeat;
    background-position: 130px 95px;
}

.grey_left h3 {
    font-size: 14px;
    text-transform: uppercase;
    font-family: "SourceSansProBold", sans-serif;
    color: #008ed6;
    padding-bottom: 15px;    
}

.grey_left h1 {
    font-size: 36px;
    font-family: "SourceSansProSemiBold", sans-serif;
    position: relative;
    margin-bottom: 60px;
}

.grey_left h1::after {
    content: '';
    position: absolute;
    background: url(../img/bottom_line.png) no-repeat;
    height: 4px;
    width: 8%;
    display: block;
    bottom: -28px;
}

.grey_left p {
    letter-spacing: 1px;
    font-size: 18px;
    color: #b4b4b4;
    padding-bottom: 165px;
}

Answer 1

[Егор Живагин]

После блока <div class="grey_right"></div>

Добавьте
<div class="clearfix"></div>

В CSS:

.clearfix{
clear: both;
}

И почитайте про float и clear )

Comments

[Максим]

я его только что про clearfix спросил !

[maestro07]

помогло. не особо понял в чем сила clear?

[Егор Живагин]

Максим Ленский, а я как раз в jsfiddle автора копался, не заметил

[Максим]

Егор Живагин, он даже не знает что это clearfix , похоже скачал где то шаблон ленда и как исправить не знает ... думает что тостер халявный фриланс

[Егор Живагин]

maestro07, мне в двух словах не особо удобно объяснять, поищите в гугле.

[maestro07]

Максим Ленский, просто практика для себя.

[Максим]

maestro07, ладно .. у меня щас есть время , могу показать на практике через teamviewer - так согласны ?

[maestro07]

Максим Ленский, спасибо, постараюсь найти сам

Answer 2

[Dmitry Sokolov]

Пример можно на codepen ?

Comments

[maestro07]

https://jsfiddle.net/jj6Lx2ty/

[Dmitry Sokolov]

maestro07, Спасибо.

Обновил ваш код (на container повесил класс clearfix и в css прописал правила для .clearfix:after). когда вы используете float:left И float:right без использования clear:both элемента, то высота блока равна 0px.

Вот можете тут примеры посмотреть.
webcareer.ru/clearfix-na-css.html

Answer 3

[Максим]

Я вижу изображения у вас в PNG а они точно имеют прозрачность ?
Возможно ... фон находится под изображением а так как оно не прозрачное то фон просто не видно

Comments

[maestro07]

прозрачный

[Максим]

maestro07, у вас есть возможность поместить вашу всё вёрстку на сервер ? надо видеть проблему

[maestro07]

Максим Ленский, https://knursultan.github.io/lucid/

[Максим]

maestro07, я не увидел clearfix у вас в css , серый применяется но только для левого и правого но так как у вас айфон вставлен background то и серого не видно

[maestro07]

Максим Ленский, у меня че та фон белый

[Максим]

maestro07, ну конечно белый , я же меняю у себя в браузере , ... вы не давно верстаете ?

[maestro07]

Максим Ленский,
.clear_left {
clear: left;
}

вот это есть. clear both почему то не помог

[Максим]

maestro07, вы сделайте полноценный clearfix и его подключайте к нужному блоку