Background issue with div

Question

I have 2 different partial views that I am calling in my main view like this:

<div class="col-md-6">
 @Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
 @Html.Action("SeriesWinsChart", "Teams")
</div>
<div class="next-game">
 <h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
 <h3 style="color:red;">@ViewBag.NextGame</h3>
</div>

Now my problem is this:

background issue

All I have done is put background-color: green in my CSS for the class .next-game (honestly just to see what it looked like.. green is not what I am going to use)... I have gone into Inspect Element on IE and I cannot find the problem as to why the background is so big. I just want the background to be around The Next Game Is:

CSS:

.next-game{
 background-color: green;
}

How do I shrink the background? I have tried width: 50%; height: 10px; //etc just to see the different changes but can't figure this out

UPDATE:

I have changed the HTML to:

<div class="next-game">
 <h3 class="text-center">The Next Game Is:</h3>
 <div class="text-center">
 <h3 style="color:red;">@ViewBag.NextGame</h3>
 </div>
</div>
<div class="col-md-6">
 @Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
 @Html.Action("SeriesWinsChart", "Teams")
</div>

This at least made the background render properly. So this has something to do with the partial views?

• Salketer: Looking at all the elements you have provided does not explain that result. Make sure there is nothing else that may impact the end result. We could help you more if you included all parts of code that reproduce this behavior.
• Joseph Marikle: col-md-6. Are you using twitter bootstrap by any chance? You should be using rows to wrap those columns if that's the case.
• Grizzly: @JosephMarikle I am using twitter bootstrap. what do you mean by using rows?
• Joseph Marikle: Standard syntax for columns in twbs is <div class="container"><div class="row"><div class="col-sm-12">Your stuff</div></div></div>. You generally need all three (container, row, column) for it to render properly. What you're running into here is probably a clearfix issue. The columns are floated, which makes the next available non-floating element appear to "wrap" them. An alternative solution would be to implement a clearfix. In bootstrap I think there's the .clearfix class.
• Grizzly: @JosephMarikle that worked. post answer and I will mark it! thank you!

Answer 1

The most likely cause for this issue is that your twitter bootstrap columns have no wrapping row. You generally need all three (container, row, column) for it to render properly. What you're running into here is probably a clearfix issue. The columns are floated, which makes the next available non-floating element appear to "wrap" them. Below is a possible solution to the problem.

<div class="container">
 <div class="row">
 <div class="col-md-6">
 @Html.Action("Chart", "Teams")
 </div>
 <div class="col-md-6">
 @Html.Action("SeriesWinsChart", "Teams")
 </div>
 </div>
</div>
<div class="next-game">
 <h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
 <h3 style="color:red;">@ViewBag.NextGame</h3>
</div>

Other solutions include adding a .clearfix class to a wrapper for the columns or adding clear:both to .next-game.

• Marcos Pérez Gude: In other words, the old float problem. I don't know why bootstrap still use floats to layouts in XXI century...
• Joseph Marikle: @MarcosPérezGude Well, to be fair, they are moving to flex in the next release. They just need to actually release it finally. :P
• Marcos Pérez Gude: really!? Good news are them!

Answer 2

You need

.next-game h3{
 background-color: green;
}

(it's just for the header h3 inside the element with that class .next-game)

• Grizzly: I have tried this and I still render the same result