user3760941 user3760941 - 1 year ago 96
CSS Question

Why is the parent div not containing the others on mobile view

Whenever I shrink the browser to mobile view, for some reason the light green 'sections' div does not cover the home-img-2 and home-img-3 divs. Why is this happening, and how can it be fixed?

I've tried clearing, relative positioning, floating and everything and still nothing. I have a feeling it will be an obvious solution. An explanation of why this happens would be useful too. Thanks for any help.



.sections {
max-width: 960px;
height: auto;
background: #0f0;
margin: 0 auto 50px auto;
}
.home-img-1 {
background: url('https://static1.squarespace.com/static/51b062bbe4b0aa90845eb0bd/t/562c077fe4b0338f867f8289/1445764004896/?format=500w');
background-size: cover;
width: 60%;
height: 400px;
float: left;
margin-right: 5%;
}
.home-img-2, .home-img-3 {
background: url('https://neslihanaydin.files.wordpress.com/2012/02/agac_1.jpg');
background-size: cover;
width: 35%;
height: 175px;
float: left;
}
.home-img-3 { margin-top: 50px; }


/* MOBILE VIEW */

@media (max-width: 768px) {
.sections {
padding: 0 15px;
}
.home-img-1 {
float: none;
width: 100%;
margin-bottom: 50px;
}
.home-img-2, .home-img-3 {
float: left;
width: 45%;
margin: 0;
}
.home-img-3 {
float: right;
}
}

<section class="sections">
<!-- 60% + 10% + 30% -->
<article class="home-img-1"></article>
<article class="home-img-2"></article>
<article class="home-img-3"></article>
</section>




Answer Source

This is because the elements inside your container are floated. Floated elements are out-of-flow, so they don't impact the flow of their surrounding elements as in-flow elements would.

One way to solve this, is adding an in-flow element below the floated elements. This will force the height of the parent to grow to accommodate that element.

.sections {
    max-width: 960px;
    height: auto;
    background: #0f0;
    margin: 0 auto 50px auto;
}
.home-img-1 {
    background: url('https://static1.squarespace.com/static/51b062bbe4b0aa90845eb0bd/t/562c077fe4b0338f867f8289/1445764004896/?format=500w');
    background-size: cover;
    width: 60%;
    height: 400px;
    float: left;
    margin-right: 5%;
}
.home-img-2, .home-img-3 {
    background: url('https://neslihanaydin.files.wordpress.com/2012/02/agac_1.jpg');
    background-size: cover;
    width: 35%;
    height: 175px;
    float: left;
}
.home-img-3 { margin-top: 50px; }


/* MOBILE VIEW */

@media (max-width: 768px) {
.sections {
    float: none;
    padding: 0 15px;
}
.home-img-1 {
    float: none;
    width: 100%;
    margin-bottom: 50px;
}
.home-img-2, .home-img-3 {
    float: left;
    width: 45%;
    margin: 0;
}
.home-img-3 {
    float: right;
}
.clear {
  clear: both;
}
}
<section class="sections">
        <!-- 60% + 10% + 30% -->
        <article class="home-img-1"></article>
        <article class="home-img-2"></article>
        <article class="home-img-3"></article>
        <!-- in-flow element - parent element's height will grow to cover this one -->
        <article class="clear"></article>
    </section>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download