Question

I’m trying to put two spans in one container to achieve a background that spans across these two spans. I’ve made a jsfiddle example, see below

http://jsfiddle.net/hsEWG/1/

The problem is that the div doesn’t seem to span across these two, instead it lays on top of the two spans. If I set background to the two spans individually I get the gutter between them, which shouldn’t be visible. I’ve also tried to locate if the divs aren’t closed properly but to no avail.

Updated with less junk:
http://jsfiddle.net/hsEWG/5/

Answer 1

It is because of not clearing. clearfix clears your issue!

Just add a clearfix class to the .bgcolorblack. If you have menus coming out of the div, overflow: hidden; will trim them.

<div class="bgcolorblack clearfix">

Fiddle: http://jsfiddle.net/hsEWG/6/

Generally TBS comes with clearfix class. But if you find it is not included, you can very well copy this to your CSS:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Second fiddle updated: http://jsfiddle.net/hsEWG/7/

In case if you don’t need space, give the wrapper a class span10. And in the CSS:

.bgcolorblack.clearfix.span10 {margin-left: 0;}

Fiddle: http://jsfiddle.net/hsEWG/9/