white space on the side of my image, urgg?

[mrMargin]

Hello all,

first post, weheee, very exciting.

I'm on a very steep learning curve. Enjoying what I'm learning though not enjoying situations like these.

I've created a DIV which has an image on the left and copy on the right.

This is how I've done it:

2 DIV's

<div class="hero"> as the main container
<div class="heroCopy"> which contains the copy

For your reference the DIV loook like this in the style sheet:

.hero {height: 168px; width: 713px; margin: 0; padding: 0; border: 1px solid #cccccc; background-color: white;}

.heroCopy { float: right; width: 215px; margin: 0 px;}

.heroCopy ul {margin: 0 px; padding: 0; list-style-type: none; text-decoration: none;}

.heroCopy li {border-bottom: 5px; padding: 0 0 0 5px; font: 75% Arial, Helvetica, sans-serif; font-weight: bold; color: #777074; height: 1.5em}

This is how I've put the DIV's together in the HTML:

<div class="hero">
<div class="heroCopy">
<h1>TITLE</h1>
<ul>
<li><a href="#women">Women</a></li>
<li><a href="#men">Men</a></li>
<li><a href="#babies">Babies</a></li>
<li><a href="#kids">Kids</a></li>
<li><a href="#teens">Teens</a></li>
<li><a href="#food">Food</a></li>
</ul>
</div>
<img src="/images/hero.jpg" alt="hero" width="485" height="168">
</div>

______________________

Hope this wasn't to long an email?

The problem is the white space to the side of the image (rightside) which means I can't get the DIV with the copt on the right to but up to the side of the image.
As there is a border-bottom under the title the gap is really obvious.

Thanks for getting this far down my email, hope you can help :)

[photon]

One issue I see right away is

margin: 0 px;

. You can't have a space between the number and the "px". It should be either

margin: 0px;

or just

margin: 0;

(since it's zero, no units are required.

Also, have you tried a negative margin on the image to scoot it over?

[mrMargin]

thanks for the help, it's done the job! cheers

[createErrorMsg]

What about setting the IMG margins and padding to zero?

.hero img {
margin:0;
padding:0;
}

Another thought would be to float the image, not the text. As in...

.hero img {
float:left;
width: WHATEVER;
}

.heroCopy {
margin-left: EQUAL TO IMG WIDTH;
}

...then move the image up in the source so it comes first. Unless you've avoided this technique in order to get the copy first in the source, in which case, just ignore me. ;)

[photon]

By the way, I forgot to say welcome to WebmasterWorld!

[mrMargin]

Hi, guys.

Thanks for the welcome :)

I set my email details to my work email so wasn't able to reply till now.

CHEERS FOR THE HELP GUYS!