I want to put the divs all in the heading with relative position to adapt in all resolutions. It did not work to use float in the divs.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Farra Certa</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="alinhaCabeçalho">
<div id="logo"><a href="http://www.farracerta.com.br"><img src="images/logo.png" alt="Logo Farra Certa"></a>
<a href="#"><img src="images/bannerheader.png" alt="ANUNCIE AQUI"></a></div>
<div id="slideHeader"></div>
<div id="social">
<div><a id="facebook" href="#"><img src="images/facebook.png" alt="facebook"></a></div>
<div><a id="twitter" href="#"><img src="images/twitter.png" alt="twitter"></a></div>
<div><a id="youtube" href="#"><img src="images/youtube.png" alt="youtube"></a></div>
<div><a id="instagram" href="#"><img src="images/Insta.png" alt="instagram"></a></div>
<div><a id="google" href="#"><img src="images/google.png" alt="google+"></a></div>
</div>
<nav id="menu">
<div id="home"><a href="#"><img src="images/home.png" alt="home" onMouseOver=
"this.src='images/homeHover.png'" onMouseOut="this.src='images/home.png'"></a></div>
<div id="JaRolou"><a href="#"><img src="images/jarolou.png" alt="Ja Rolou" onMouseOver=
"this.src='images/jaRolouHover.png'" onMouseOut="this.src='images/jarolou.png'"></a></div>
<div id="VaiRolar"><a href="#"><img src="images/vairolar.png" alt="Vai Rolar" onMouseOver=
"this.src='images/vaiRolarHover.png'" onMouseOut="this.src='images/vairolar.png'"></a></div>
<div id="Contrate"><a href="#"><img src="images/contrate.png" alt="Cotrate" onMouseOver=
"this.src='images/contrateHover.png'" onMouseOut="this.src='images/contrate.png'"></a></div>
<div id="Contato"><a href="#"><img src="images/contato.png" alt="Contato" onMouseOver=
"this.src='images/contatoHover.png'" onMouseOut="this.src='images/contato.png'"></a></div>
</nav>
</div>
</header>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/backgroud.jpg);
background-repeat: repeat;
height:100%;
width:100%;
margin: 0px;
}
header {
background-image: url(images/header.jpg);
background-repeat: repeat-x;
height: 150px;
width: 100%;
position: absolute;
top: -7px;
}
#alinhaCabeçalho {
height: 100%;
width: 1400px;
position: relative;
top: 0px;
left: 50%;
margin-left: -635px;
}
#logo {
height: 149px;
width: 198px;
position: relative;
top: 2px;
left: 5%;
}
#slideHeader {
height: 115px;
width: 425px;
position: relative;
top: 0px;
}
#menu {
height: 39px;
width: 605px;
position: relative;
top: 80px;
left: 650px;
}
#home {
height: 39px;
width: 121px;
position: relative;
float: left;
}
#JaRolou {
height: 39px;
width: 121px;
position: relative;
float: left;
}
#VaiRolar {
height: 39px;
width: 121px;
position: relative;
float: left;
}
#Contrate {
height: 39px;
width: 121px;
position: relative;
float: left;
}
#Contato {
height: 39px;
width: 121px;
position: relative;
float: left;
}