Image moves upon resize of browser window

[baxterthegreat]

I am writing my first website for my dad's company. In the header we have the logo image and then an image containing the contact info, followed by a bottom border and a horizontal menu. My problem is that I have the contact info png file positioned where I want it to be but when I shrink the browser window it will move horizontally. I have tried using position absolute but that makes the image sit on top of the logo image. If I add enough padding to make it be where I want it to be, the DIV that contains it covers the logo and the link to the home page that the logo image has doesn't work. I have attached the code I currently am using which positions it correctly unless it moves, if needed I can post an example of the other code that stops the moving issue but causes the logo link to stop working. Your help is greatly appreciated.

HTML:

<div id="HeaderWrapper">                                                                        <!-- HEADER -->  

           <div id="logo">                                                                          <!-- /logo -->
               <a href="Default.aspx"><img src="Images/packetiq_logo_w_slogan.jpg" alt="Packet IQ Logo"
                style="
                    height: 80%;
                    width: 80%;
                    float: left;
                    position: absolute;
                    "/>
                    </a>             
            </div>
            <div id="contactinfo">                                                                   <!-- contactinfo -->                               
                <a href="Contact.aspx"><img src="Images/contactinfo.png"
                    style="
                        float:right;
                        padding-top: 70px;
                        padding-right: 10px;
            "/></a>
            </div>
     </div>

CSS:

 #HeaderWrapper
{
    padding: 10px 0 0 0;
    width: 100%;
    max-width: 1000px;
    height: 110px;
    background-color: #ffffff;  
    border-bottom: 1px solid #000000;
}


#logo
{
    width: 570px;
    height: 103px;
    float: left;
    padding-left: 5px;
    position: absolute;
    padding-top: 10px; 
    
 }
#contactinfo
{
    
}

As you can see I have the CSS coding that directly involves the images in with HTML. I have found that it makes no difference whether my CSS coding for my images is in with the images or on my stylesheet. Also as I said this is my first website ever so I am quite ignorant and I hope you guys can be of some help and I am not making some simple bumbling mistake. Thanks again!

[nandahosting]

could you post the link to your website? thanks

[Mooseman]

any CSS float will move with the browser window. It also changes depending on the screen size. I often create a centered div of defined width, and place my content inside.

[nandahosting]

Yes I agree with Mooseman, also if you want your images to be e.g 50% width of the header and not the browser window, you would have to add "position: relative" to the header(wrapper).

Hope this helps

[baxterthegreat]

The website is not live yet, I am developing it in ASP.NET at the moment.

Here is a screenshot of the results


Is there anyway to align the image to the right besides float?
Thanks for your replies.

[baxterthegreat]

So I figured out at least a cheap trick to make it work. I am still using a padding setting to keep it pushed over to the right but I changed the div that the image is in's height to it's smallest and used a padding-top setting to make it stay where I want it. This seems to keep it in place while still allowing the Logo to link to the homepage. I have yet to try it on a different resolution computer but I am doing that now and I assume it will work as well as before. Thanks for your help everyone, your idea's helped me stumble across this solution!

[Mooseman]

Try creating a div to 'wrap' the content. It would be the width of the menu bar. Then the image, as a child element, could have float: right and stay where you want it to.

[baxterthegreat]

Originally Posted by Mooseman

Try creating a div to 'wrap' the content. It would be the width of the menu bar. Then the image, as a child element, could have float: right and stay where you want it to.

That's what I have already, if you look at my code I think I included the code for the "headerwrapper" and it kept everything in place but the contact info image. So far this solution is working but I do have a feeling that I am using a cheap trick that may result in problems down the road.