float left and right on same line

[erikirl]

http://www.hardwareforfree.com/
I'm trying to get the Consumer Gift Network image to be in the top right corner of the 800px area in the header. I have searched for hours and tried a lot of different things but it's still not working for me. I'm not very experienced so I'm sure it's something simple that I'm missing. Please look at the code below and tell me what I need to change.

==============HEADER.TPL===================
    <div id="header-control-div">
        <div id="sub-logo-bar">
            <h1><a href="{$site_url}">HardwareForFree</a></h1>
            <p>&nbsp;</p>
            <p style="line-height: 25%">Keep your money. Get it for FREE! &nbsp; <a href="javascript:pop('faq.htm')">How this works</a></p>
            <p><br>&nbsp; &nbsp;<a href="login.php"><img src="images/icon_memberlogin.gif" width="11" height="14" border="0"> <font style="font-size: 11px; vertical-align: 10%;">Member Login</a></font></p>
            <div id="account-info-box-home">
                <img style="float:right;" src="images/logo/cgn119x75.gif" width="119" height="75" border="0">
            </div>
        </div> <!-- END sub-logo-bar -->
    </div> <!-- END header-control-div -->
 
==============CSS=================
#header-control-div    {    
    width: 800px; height: auto;
    margin: 0 auto; padding: 0;
    }
 
#sub-logo-bar { 
    background: transparent url('../images/bg/body-bg.jpg') 50% 0% no-repeat;
    width: 800px; height: 100px;
    }
 
#account-info-box-home {
    width: 450px; height: auto;
    display: block; float: right;
    margin: 0 0 0 0; 
    }
 
#sub-logo-bar h1 a {
    background: transparent url('../images/logo/hardwareforfree202x35.gif') no-repeat left top;
    display: block; float: left;
    width: 202px;     height: 35px;
    margin: 0 0 0 0 ; padding: 0;
    text-decoration: none;
    text-indent: -9999px;
    outline: none; 
    }
 
#account-info-box-home h1 a {
    background: transparent url('../images/logo/cgn119x75.gif') no-repeat right top;
    display: block; float: right;
    width: 119px; height: 75px;
    margin: 0 0 0 300px ; padding: 0;
    text-decoration: none;
    text-indent: -9999px;
    outline: none; 
    }
 

[hsriat]

First of all, for the whole page in a centered area of 800px, make a div (say wrapper) and add this to the CSS:

body {margin: 0 auto;}
#wrapper {margin:0 auto; width:800px;}

Then try building the page inside the wrapper.

You have also messed up your HTML and CSS quite well. Have a look here.

[erikirl]

b u m p b u m p b u m p

[erikirl]

never mind i got it working

[hsriat]

never mind i got it working

Glad you fixed it.