I am doing an header, that consists of left and right sides.
On the right side I have a background image that lays flush to the right. I want to add some text as a tagline before the background image, but the text is all swashed up to the image. Is there an easy way I can make this more spaced as I have tried a lot of things, like making the div size bigger and adding span tabs?

<div id="header">
<div id="left_header">
<h1><a href="www..uk" title=""><img height="86" alt="" src="" width="231" /></a></h1>
</div>
<div id="right_header">
<p>Recycle and donate<br />your unwanted furniture<br/>Tel: <br /><span class="caps">Lewisham Area</span></p></div></div><div class="clear"></div>


The css is #header {
display: block;
width: 90%;
height: 140px;
padding-top: 5%;
padding-bottom: 3%;
background: #fff;
padding-left: 2%; padding-right: 2%;
margin:0;
}
#left_header {position: relative; float:left; width: 48%; height: 90px;}

#right_header {background: url('recycle_cm1.jpg');
background-repeat: no-repeat;
background-position: top right;
font-family: Arial, sans-serif, Verdana;
color: #666666;
position: relative;
width: 50%;
height: 150px;
float: left;
margin-right: 14px; padding: 0; text-indent: 10px;
text-align: right;
}

#right_header p {margin: 0; padding: 0; text-align: center; }

.caps {text-transform: uppercase; color:purple; margin-right: 10px}

Is there a reason you wanted a left and right side to your header? I mean you can have a header div and float an image to the left side of the header. Add a paragraph and use margins to position the text where you need it.

On the left side of the header I have the logo. I then have the text and a background image on the right side, so yes I do need 2 sides.

How about attaching the images for me. ^_^ Then, I'll spend about five minutes fixing it up and you'll be good to go. After, I will explain to you what was wrong.

I dont know how to put images on this forum.
the site is:

puddypaws.co.uk/test.html with the usual www. before

Just curious but how big is the recycle_cm1.jpg image?

the image is 120px x 117px

Hello quartzy,
I think your box model (http://www.w3.org/TR/CSS2/box.html) is off. You set left and right header to 48 and 50% widths and then add margins to that. Margin and padding both add to total width and it's pretty much impossible to mix % and px measurements.

You also have the containing #header set at 140px and put #150px high #right_header inside it. That doesn't quite fit...

Try it like this once: #header {
height: 140px;
padding: 10px 5px 5px;
background: #fff;
margin:0;
}
#left_header {
width: 48%;
float:left;
}
#right_header {
background: url('recycle_cm1.jpg')no-repeat top right;
font-family: Arial, sans-serif, Verdana;
color: #666666;
width: 50%;
float: left;
}
#right_header p {
margin: 0;
padding: 0;
text-align: left;
}

I know that pixels and percentages do not mix, and that was my next task to get all of the pixels into ems.

I tried it your way, but it did not work, I had to remove the float left from the right div. And I then added a margin left to the p tag, to get the text into place, which I had not thought of until you said to add a margin left for the right div. So thanks between us we have sorted it out. Now back onto the next prob.