Two divisions distributed over the top


I have a problem with 2 divs fixed on top of the page. I have fixed them on the top, if I scroll the page down or up everything is ok. But if I scroll it right and left, I can't see the second div. How can I solve it?

Here is my page, you can see the problem by doing this: 1. Resize the browser page 2. scroll down 3. scroll right

Here the code:


<script type='text/javascript' src='jquery-1.7.1.js'></script>
<LINK REL="stylesheet" HREF="Stile.css" TYPE="text/css" />
<script type='text/javascript'>
$(window).scroll(function () {
    if(($(".container").position().top - $(window).scrollTop()) <= 0)

}); });

<div class="container" >

<div id="cont">

<div id="menubar">
<div id="fastlogin">

You could set up a separate stylesheet for smaller screen widths to position the right div at another position.

Or you could utilize percentages for the boxes positions and width to make the layout fluid.

Or you could use the right: #%; to position the right box, instead of setting a left margin.

Or you set a fluid width to that left margin.

Or, or, or …