Olá, estou com um problema em meu projeto,
no topo do meu site quero uma imagem e um bloco azul,
como representado abaixo,
Ambos estão dentro de uma div#topo com height: 10% e width: 100%; A imagem tem um height: 100%; e um width: auto; para ficar sempre quadrada e proporcional ao tamanho da tela.
No div#bloco_azul eu uso position: absolute e width: 89%, mas se tela for de tamanhos diferentes ele fica maior ou menor e aparece barra de rolagem, acaba ficando assim :
ou assim : topo http://www.mediafire.com/convkey/56ee/iqmqr2nij89eu18zg.jpg
Aqui está o código : 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;
}
Oque devo fazer ? Desde já, Obrigado!