css – Align two divs vertically after floating one of them

Question:

I'm creating a footer for an html page. It is very simple and consists of a SINGLE line. I would like one part, which contains the Copy information, to be aligned to the left margin and the other, which contains a menu, to be aligned to the right margin of the site.

I separated the text into two divs and float: right on the second. Turns out I'm not able to align the two parts vertically so that they appear to be on the same line.

Here are the codes:

HTML

<section id="rodape-legal">
    <div class="rodape-legal" id="rodape-legal-copy">
        <h6>Copyright &copy; 2017. Todos os direitos reservados.</h6>
    </div>

    <div class="rodape-legal" id="rodape-legal-menu">
        <nav class="doc-legais">
        <h1>Documentos Legais</h1>
            <ul>
                <li class="menu"><h6><a href="#">Início</a></h6></li>
                <li class="menu"><h6><a href="#">Blog</a></h6></li>
                <li class="menu"><h6><a href="#">Facebook</a></h6></li>
                <li class="menu"><h6><a href="#">Twitter</a></h6></li>
                <li class="menu"><h6><a href="#">Linkedin</a></h6></li>
                <li class="menu"><h6><a href="#">Segurança</a></h6></li>
                <li class="menu"><h6><a href="#">Privacidade</a></h6></li>
                <li class="menu"><h6><a href="#">Termos de uso</a></h6></li>
            </ul>
        </nav>
    </div>
</section>

CSS

section#rodape-legal {
margin: auto;
padding-top: -20px;
text-align: left;
}

div.rodape-legal {
display: inline-block;
}

div#rodape-legal-menu {
text-align: right;
display: inline-block;
float: right;
}

nav.doc-legais li {
display: inline-block;
margin-left: 10px;
}

nav.doc-legais h1 {
display: none;
}

nav.doc-legais a {
transition: color, 1s;
text-decoration: none;
color: black
}

footer h6 {
font-size: 12px;
font-weight: 300;
}

Answer:

From margin: 0 in the ul tag. The ul comes by default in browsers with margin , as do the commonly used p and h tags. And with the arrival of -webkit is coming with -webkit-padding-start , that the padding from left to right, like a padding-left .

Scroll to Top