How do I prevent my background colour/image from appearing in the previous row (bootstrap)

Question

I am trying to apply a background image/colour to the row entitled: <div class="row-fluid promotion"> . However, when I do set such a background, the background appears in the row before, entitled <div class="row-fluid products-row"> I have seen a few articles, on here with similar issues, but their solutions do not seem to answer my problem.

HTML/PHP

<div class="row-fluid products-row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 product-image-links" id="product-image-a">
            <a href="https://www.example.com/product-a/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-a.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-a/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product A</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-image-b">
            <a href="https://www.example.com/product-b/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-b.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-b/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product B</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-c">
            <a href="https://www.example.com/product-c/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-c.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-c/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product C</span><i class="fa fa-cirlce" aria-hidden="true"></i></a></h3>
        </div>
    </div>

    <div class="row-fluid promotion">
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
            <p>Text Text Text</p>  
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
    </div>

CSS

.products-row{
    text-align: center;
}
#product-image-a{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-b{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-c{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-right: 2%;
    margin-bottom: 50px;
}
.button{
    background-color: green;
    font-weight: bold;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 40px;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000; 
}
.product-title{
    padding-left: 20px;
    padding-right: 20px;    
}
.promotion{
    background: silver;
    height: 30px;
    background-image: url(http://www.example.com/wp-content/uploads/2017/03/pattern.png);
}

Answer 1

You can target the div by chaining both of the class selectors:

.row-fluid.promotion {
  // your style
}

This ensures that the rule only applies to the div with both of those classes.

Answer 2

You need to change .row-fluid to .row .

The only Grid System class that has -fluid in it is .container-fluid . Since .row-fluid doesn't exist and .row does, .row-fluid wasn't able to clear the floats of your column elements (which .row does).

What's happening and how does one normally fix it?

The reason the background for one row moves up behind the previous row is because your rows have floated child elements. When this happens, the parent collapses and has no height. The parent collapses because floated elements are taken out of the normal document flow and don't take up space.

The only reason you saw a gray background at all is because you set a height of 30px on .row-fluid via .promotion . Otherwise that row would have collapsed also, hiding the gray background.

In the below snippet you cannot see the gold background of the container .row element because its children are floated and do not take up space.

 * { box-sizing: border-box; } body { margin: 0; } .row { background-color: gold; } .row > div { float: left; width: 33.333%; min-height: 35px; border: 1px solid #444; } 

 <div class="row"> <div></div> <div></div> <div></div> </div> 

What you need to rectify this is a clearfix. Normally I would recommend the Micro Clearfix but you are using Bootstrap 3 and its row classes have a clearfix built in. A clearfix creates a new block formatting context so the parent element doesn't collapse and things like backgrounds and borders can be applied as intended.

In the following snippet we have cleared the floated child elements from the first example so that the parent element isn't collapsed and you can see the gold background. This is what .row does.

 * { box-sizing: border-box; } body { margin: 0; } .row { background-color: gold; } .row > div { float: left; width: 33.333%; min-height: 35px; border: 1px solid #444; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } 

 <div class="row cf"> <div></div> <div></div> <div></div> </div> 

Answer 3

After browsing much of the internet, and various trials and errors, I have managed to figure out the solution.

For anyone, experiencing a similar problem, try inserting clear: both into the affected element, via your CSS file.

Read more: W3Schools