div not positioning correctly

Question

Hello Experts,

I have 2 divs, each is having a background image and i want them to line up side by side. But for some reason they are coming up vertically where as i want them horizontaly.

Please find the code of both the divs below and please advice.

header

{ top: 40px; width:310px; height: 90px; background: url(Images/logo.jpg) no-repeat; }

logo

{ top: 40px; left: 3200px; height: 100px; background: url(Images/banner.jpg) no-repeat; }

thanks Amit

Answer 1

<div id="header-container">
<!-- stick your HTML here -->
</div>

    #header-container { overflow:hidden; zoom:1; }

Modify your css to add these properties:

    #header { float:left; } 
    #logo { float:left; width:[the width] }

This assumes they are siblings and they aren't inside of each other.

Answer 2

    <div id="header-wrapper">
    <div class="header">hello</div>
    <div class="logo"></div>
    </div> 

and ur css:

/* this width = .header + .logo + any left or right padding on them.. or it can be 100% */   
   #header-wrapper {width: 1000px;}   

   .header {background: url(Images/logo.jpg) no-repeat; width:500px;height:90px;float:left;}
   .logo {background: url(Images/banner.jpg) no-repeat;width:500px; height:90px;float:left;}

That should work also, havent tested so let me know if it doesn't