Search code examples
javascriptcsshtmlwidth

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 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

Solution

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

    Cheers