percantage scaled centered div, three containeled elements breaking

Question

I saw a related post about scaling divs percentage wise a couple of weeks earlier, can someone help with something similar?

What I have a is centered #container element which contains three other elements. A #leftContent (100% column running down left side), #header, and a #mainContent.

Appears okay half the time (roughly) when resizing the window, but the other half the #header and #mainContainer drop down under the #leftContent. And it only occurs when scaling horizontally, I can scale vertically all I want and its fine.

CSS

body
{   
position: absolute;
width: 100%;
height: 100%;
margin-left: 0px;}

#container
{
position: relative;    
width: 70%;
left: 50%;
margin-left: -35%;    
top: 0%;
height: 80%;    
}

#leftContent
{
position: relative;
width: 25%;
float:left;
height: 100%;    
background-color: Yellow;    
}

#header
{       
width: 75%;
background-color: Gray;
height: 25%;
}

#mainContent
{
position: relative;
height: 75%;
background-color: Black;    
}