CSS elements being separated / breaking / wrapping

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 bac开发者_StackOverflowkground 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 ;)

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.

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.