CSS Problems with div at the bottom - html

Question

I have a div that is at the bottom of my page. It's CSS is:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
background-color: black;
}
And I have the div's content like on the image:
content html:
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
How do I make for my div's content show up something like this:
I can't use line breaks or tables, because the div's position is fixed, and now I don't know what to do...

Answer 1

Something like this JSFiddle should work.
What we do is apply the background-color to the children of the container div. Then we give them some padding, which creates the space between them. Voila!
HTML:
<div id="news-bottom">
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
CSS:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
}
#news-bottom span span,
#news-bottom span img {
background-color: black;
padding: 5px;
}​​

Answer 2

If you want fixed position, you can make several divs and change their left property to what you like. You can use % positioning so they look almost the same on different resolutions.
But, I'd recommend using float in a fixed container <div>, and combine with #jmeas suggestion of margins. Something like this:
HTML
<div class='container'>
<div class='arrow'></div>
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='arrow'></div>
</div>
CSS
#container {
...fixed...
}
.arrow {
float:left;
width:10%;
}
.item {
float:left;
margin-left:5px;
width:20%;
}