Problems with Width

Question

Hello, I have a problem in my project, at the top of my site I want a picture and a blue block, as represented below,

Both are inside a div#top with height: 10% and width: 100%; The image has a height: 100%; and a width: auto; to always be square and proportional to the screen size.

In div#blue block I use position: Absolute and width: 89%, but if screen is of different sizes it gets bigger or smaller and scroll bar appears, it ends up like this :

or so : topo http://www.mediafire.com/convkey/56ee/iqmqr2nij89eu18zg.jpg

Here is the code : HTML

<div id="topo">
    <img id="logo" src="http://www.mediafire.com/convkey/ab86/gyn33csao1jj3jazg.jpg"/>
    <div id="bloco_azul"><img id="logo2" src="http://www.mediafire.com/convkey/4b1a/1004wqw2lh36au6zg.jpg"/></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height:100%;
}

topo {
    height: 21%;
    width: 100%;
    background-color: #f2f2f2;
}

img#logo {
    display: inline-block;
    float: left;
    background-color: rgba(255, 255, 0,1);
    height: 100%;
    width: auto;
}

div#bloco_azul {
    margin-top: 0;
    float: left;
    position: absolute;
    display: inline-block;
    background-color: #4795cf;
    margin-left: 0%;
    width: 89%;                       /* Aqui fica o width do bloco azul */
    height: 10%;
}

img#logo2 {
    display: inline-block;
    height: 100%;
    width: auto;
}

What should I do? Thanks in advance!

Answer 1

I’ll tell you what, see if he gets it:

JSFIDDLE

HTML

<div id="imagem"></div>
<div id="header"></div>
<div id="content"></div>

CSS

#imagem {
    background-color: red;
    position: fixed;
    height: 10%;
    top: 0px;
    left: 0px;    
    z-index: 3;
}

#header {
    background-color: blue;
    position: fixed;
    height: 8.9%;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
}

#content {
    background-color: gainsboro;
    position: fixed;
    overflow: auto;
    height: 91.1%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
}

JAVASCRIPT

var imagem = $("#imagem");
$(window).resize(function() {
    imagem.innerWidth(imagem.innerHeight());
});
$(window).trigger("resize");