CSS - Dynamic Div minimum / maximum position - html

Question

I have a div containing the website logo, that I stuck in the top left corner of my website.
In order to have it dynamic, I put its position on a 10% screenwidth from the left. Now the problem occurs when the browser gets smaller than the width of my content, it obscures important buttons or text on the website.
I cant seem to figure out how to resolve this and any input would be great.
Edit: added additional divs to contain both the Logo banner and the Login-menu above the website;
Header.php:
<div id="navcontainer" class="navcontainer-div">
<div id="bannier" class="bannier-div">
<img src='/img/banner.png'>
</div>
<div id="navigation" class="navigation-div">
<table width='100%'>menu content</table>
</div>
</div>
Style.css:
.navcontainer-div
{
margin-left:-10px;
max-width: 100%;
width:100%;
/*height: 125px;
background-color: #AEB861;*/
background-image: url('/img/header_bg.png');
background-repeat: repeat-x;
display:block;
border-radius: 3px;
top:0;
position: fixed;
}
.navigation-div
{
z-index: 2;
max-width:1000px;
height:60px;
background-color: #E4EEB9;
margin: 0 auto;
color: #000;
border-radius: 3px;
}
.bannier-div
{
z-index: 3;
left:10%;
position: fixed;
width:100%;
max-width:150px;
}

Answer 1

I think you should user another class or id with parent element.
Example:
At page http://webstore.thelifeforge.nl/about.php we have id navigation
At page http://webstore.thelifeforge.nl don't have id navigation
So we can write:
.bannier-div
{
z-index: 3;
left:10%;
position: fixed;
width:100%;
max-width:150px;
}
#navigation .bannier-div
{
z-index: 3;
left:5%;
position: fixed;
width:100%;
max-width:100px;
}