Page "bleed" off edge

[ForestTech]

Hi guys,

I'm having some trouble with (i think) my CSS. Basically what it's doing is, when I align an image to the right hand side of the page, it's bleeding over the edge (i.e. I can only see 20px or so of the left hand side of the image and the rest is off the edge of the page). I can't upload the site just yet, but as soon as I can I'll update the post.

The code in question is:

<!-- HEADER -->
<div id="header">
    <a href="http://www.kbhs.com.au/"><img src="images/tllogo.gif" class="logo" /></a><img src="images/header.gif" class="header" />
</div>
<!-- CONTENT -->
<div id="content">
<!-- Menu -->
    <div id="menu">
        <ul>
            <li>
                HOME
            </li>
        </ul>
    </div>
<!-- Information Area -->
    <div id="info">
        <h1>HOME</h1>
        <img src="images/kbvan.jpg" style="float: right" />
    </div>
</div>
<!-- Footer -->
<div id="footer" class="onblue">
    <p style="vertical-align: middle;">&copy; Copyright 2007 - KB Hire and Sales. Website Design by <a href="http://www.forestonline.com.au" target="_blank" class="onblue">Forest Technology</a>.</p>
</div>

and the CSS is:

div
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    vertical-align: top;
}

#header
{
}

#content
{
    background-color: #FFFFFF;
    width: 100%;
    padding-right: 20px;
}

#menu
{
    background: #006699 url('images/menushim.gif') repeat-y fixed left top;
    position: fixed;
    width: 206px;
    border: 0px;
    float: left;
    top: 152px;
    height: 100%;
}

#info
{
    background: #FFFFFF none no-repeat fixed right center;
    position: fixed;
    float: left;
    padding: 20px;
    left: 206px;
    height: 100%;
    width: 100%;
}

#footer

{
    background: #006699 url('images/footershim.gif') repeat-y fixed left top;
    width: 100%;
    height: 30px;
    position: fixed;
    text-align: center;
    bottom: 0px;
}

Any help would be greatly appreciated.

Thanks in advance
ForestTech

[autocrat]

Could you tell us which Iamge you refer to?
You also have Inline styling, which will always overide/take priority external styling.

[ForestTech]

Haha... fair point.

The image I was referring to is the kbvan.jpg in the info area.

<!-- Information Area -->
    <div id="info">
        <h1>HOME</h1>
        <img src="images/kbvan.jpg" style="float: right" />
    </div>

The inline styling ideally shouldn't be effecting this image...

Cheers
ForestTech

[MidiMagic]

That vertical-align: middle may be shoving stuff around. It's intended for table cells, not p elements.

[ForestTech]

That didn't seem to work.

It's ok, I think I'll change the design a bit anyway, so hopefully it won't matter too much. Oh well.

Thanks HEAPS anyway guys!
ForestTech