CSS elements being separated / breaking / wrapping - css

Question

Edit: fixed. Thanks everyone for the help ;)
Hello everyone,
I'm having a few problems with the blue bar elements being separated instead of being together.
Both elements "Notícias" and the blue bar are inside a div called "content". The blue bar is inside a span, and is created with 3 divs. One for the left image, the middle one is a repeating background and finally the third one with the last image.
Here's an image to ilustrate the problem: http://i52.tinypic.com/b3vhic.png
The code is the following:
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
display: inline-block;
height: 14px;
width: 7px;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
display: inline-block;
height: 14px;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
display: inline-block;
height: 14px;
width: 7px;
}
And the html is:
<span class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</span>
What is the best way to accomplish this?
Thanks in advance ;)

Answer 1

It's hard to answer without being able to experiment with the actual code and graphics. But you can start with adding the following.
.barra div {
padding: 0;
margin: 0;
}
If it doesn't work it would be great if you could post a link to a demo of bar.

Answer 2

The problem is that they're inline-block elements per your CSS rules and you have whitespace between them in your markup. You should either float them, or position them absolutely.
HTML:
<div class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</div>
CSS:
.barra > div {
float: left;
height: 14px;
width: 7px;
}
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
}
That also cuts out a bunch of duplication you had going on.