Keeping div from auto resizing

[Mornincupofhate]

#body-main-header{
	position: absolute;
	background-color: #f2f2f2;
	top: 10%;
	left: 15%;
	width: 85%;
	height: 5%;
	border-radius: 0px;
	box-shadow: 0px 1px 2px #cccccc;
	background: linear-gradient(#ffffff, #f2f2f2);
	opacity: 0.95;
	z-index: -1;
}

So basically I'm having a problem where this header isn't lining up with the left navbar properly. What I want to do is just use pixels so that it doesn't auto scale, but I'm still forced to use percentages for full page width elements. They don't combine well.

 

 

The first image shows what happens when the page is shrunken by width. It gets all fucky and the main header topbar gets merged with the left navbar. How would I go about getting this to work? (I'm using pixels for the left navbar's width by the way (My goal is to make my divs not auto shrink when the page is resized))

 

The second image is when the page is normal, but I want it to look like that even when someone resizes it.

 

[vorticalbox]

use min-width to set the smallest the div will go?