Divs side by side header

2

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;
        }
    
asked by anonymous 09.10.2016 / 00:09

1 answer

3

I do not know if I got it right. But you can use flex to align the elements instead of the float. Flex adapts easily to various resolutions. See an article about it: link

Give more details or an image of how the final result will be so we can help you.

    
10.10.2016 / 20:43