How to position a div with left position against another div and right position at the edge of the screen?

I need to do a simple website with a header just like this:

_{(source: x-br.com)}

My picture may not be perfectly accurate, but the wrapper must be exactly 960px, centered.

While the menu bar... Must have a infinite width to the RIGHT, no matter what size of the client screen.

For both sides, we all know that width: 100% solves it quickly and sharply. But for just one side?

So far, i've managed to make it work in a workaround way by doing this mix of css:

.wrapper {
max-width: 960px;
margin: 0 auto;
position: relative;
width: 960px;
}

#top_menu {
margin-top: 48px;
height: 40px;
width: 582px;
display: block;
float: right;
}

#top_menu .leftborder {
width: 7px;
height: 40px;
background: url('images/menuborder.jpg') no-repeat;
display: block;
float: left;
}

#top_menu .content {
width: 543px;
height: 20px;
background-color: #231f20;
display: block;
float: left;
padding: 10px 16px;
}

#top_menu_scrapper {
position: absolute;
display: block;
height: 40px;
background-color: #231f20;
height: 40px;
top: 48px;
left:960px;
width: 0px;
margin: 0;
}

With this JS code:

function AutoDivScrapper () {
var ScrapperDiv = document.getElementById('top_menu_scrapper');
var UserWindow = parseInt(document.body.clientWidth);
var NewScrapperWidth = ( UserWindow - 960 ) / 2

if (NewScrapperWidth < 0) {
    NewScrapperWidth = 0;
}

ScrapperDiv.style.width = parseInt(NewScrapperWidth) + "px";
}

What i created was:

First, a div, called top_menu, inside the wrapper, which create the part of the menu where i will write the links and put the fancy rounded border, the little house and etc.

Another div, called top_menu_scrapper, which is absolute and basically, has just height, top and left alignment and background color.

The JS captures the width of the user screen, takes off 960 (the size of the wrapper) resting just the both sides out of the wrapper. Since i only want it for one size, i split the value in half, and BAM, we get the correct size in pixels for the part of the screen i want to fill with.

It seemed perfect for me, but guess what, my boss said it is a kinda "bug-ish" because if the client loads the page in a small screen, and then maximize it without reload again, we'll see a big hole in the right side.

Yes, my friends, for开发者_JS百科 more weird that it sounds, this is exactly what he's complaining about.

Anyway, so here i am, asking for a bit of your knowledge to aid my propose.

If you guys know a better way to do this menu... OR make my JS work in REAL-TIME, i'd be most gratefull for your support :D

I did it on this site a long time ago. I don't remember exactly how but I inspected the CSS and I think this is the necessary code.

#menu-extend { 
background-color: #e8e8e8;
float: right;
height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: -30px;
position: relative;
right: 0px;
top: 100px;
width: 50%;
z-index: 0;
}

I've made a demo for you, it should work. Tested on IE7/8/9, Firefox 4, Safari 5, Chrome 10.

Cheers

You can absolutely position all edges of an element. So you could use a style rule to position the menu div something like this:

.menuDiv { top:50px; left:50%; padding-left:480px; margin-left:-480px; right:0px; position:absolute;}

This won't work in IE6, so you'll need to to decide how, or if, you want to work around this.

Edit: Set the left hand position to 50% then use a negative margin and padding equal to half the wrapper div's width : http://jsfiddle.net/brddU/1/ (I'm assuming that the wrapper div is an independent div below the menu.

Unless I'm missing something of your intent, you can add two CSS rules:

.logoDiv {width:960;float:left}
.menuDiv {width:100%}

And then have the following HTML:

<div class="logoDiv">This is my logo code</div>
<div class="menuDiv">This is my menu code</div>

.