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);
}

your `#product-image-a/b/c` IDs are identical. You should create a reusable CSS class instead of duplicating the CSS for every element that might use it. If there's a single property out of 10 that needs to be changes, place the 9 that are the same in a reusable class and then use a slightly more specific CSS selector to apply that one property that is different for each element. — hungerstar, Mar 13 '17 at 15:39
Thanks for your suggestion. I have kept them separate during the production phase (just a preferred way of working on my behalf). That said, once the website is completed, I will be going through and 'tidying up' my CSS file. That said, would your suggestion resolve my issue? — Craig, Mar 13 '17 at 18:31
if you could provide a [Minimal, Complete and Verifiable Example], that would be great. I tried to replicate your issue with [a simple demo](https://jsfiddle.net/nge9m2da/) and didn't not run into your problem. — hungerstar, Mar 13 '17 at 20:47
Thanks for your effort with my issue. What do you mean by 'Minimal, Complete and Verifiable Example'? Would this be something other than the coding? — Craig, Mar 13 '17 at 20:49
Its just the code but as you can see from the [JSFiddle](https://jsfiddle.net/nge9m2da/) I provided before, the yellow image stays in its own row. While the column elements don't contain the same HTML that you have, it has the same HTML. So it seems like something is missing, maybe some additional CSS? Take a look at [this popular question](http://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css?rq=1), you can see that there's a code snippet that demos the problem in the question. If you made one of those that **would be great**! — hungerstar, Mar 13 '17 at 21:01
I see what you mean now. I have just tried it and it appears to work fine, using the Code Snippet. Therefore, I can only assume that there is an issue elsewhere, within the site. Any ideas on any common areas that can cause elements to overlap, other than CSS? I have checked all of the tags and they are all open and closed accordingly. — Craig, Mar 13 '17 at 21:31
Thanks for your time hungerstar. I have now resolved my problem, as per my answer below. — Craig, Mar 13 '17 at 23:00

score 2 · Answer 1 · answered Mar 13 '17 at 15:33

2

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.

answered Mar 13 '17 at 15:33

sol

22,311
6
42
59

while this is true, I don't see anything in the provided CSS that suggests that `.promotion` wouldn't work. – hungerstar Mar 13 '17 at 15:41
@hungerstar Good point, I guess I read the question a bit too quickly. – sol Mar 13 '17 at 16:11
Thanks for both of your comments. I was not sure how your suggestion would had worked but tried it anyway. Unfortunately, to no success. That said, I have figured out the solution now, as per my answer. :-) – Craig Mar 13 '17 at 22:59

hungerstar · Accepted Answer · 2017-03-14T14:34:40.163

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>

Apologies for the delayed response @hungerstar. Many thanks for your extended answer. — Craig, Mar 07 '18 at 21:26

score -1 · Answer 3 · answered Mar 13 '17 at 22:58

-1

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

answered Mar 13 '17 at 22:58

Craig

1,872
5
23
56

While this might work, it's not the _"root"_ of your individual problem. Although the actual answer is an extension of this answer. The main issue is an improper application/understanding of the Bootstrap Grid System. Please see my answer on how to rectify the issue. – hungerstar Mar 14 '17 at 14:23

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

3 Answers3

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