Align two Ivs vertically after using float in one of them

Question

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

I split the text in two divs and gave a float: right in the second. It turns out that I’m not able to align the two parts vertically so that they seem to be on the same line.

Follow 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 1

You need to remove the margin of <ul> within the div right-wing:

div#rodape-legal-menu ul {
   margin: 0;
}

That one margin native to the <ul> is creating a vertical space in the div.

You also need to define a line-height same font size, to adjust the line:

nav.doc-legais {
   line-height: 12px;
}

Run the snippet below in full screen to see the result:

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

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

nav.doc-legais {
   line-height: 12px;
}

div#rodape-legal-menu ul {
   margin: 0;
}

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;
}

<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>

EDIT

To be responsive, I would suggest defining width: 50%; in each div and other adjustments:

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

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

div.rodape-legal ul,
div.rodape-legal li,
div.rodape-legal h6 {
   margin: 0;
}

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 {
   line-height: 12px;
}

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;
}

<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>

Answer 2

Of margin: 0 on the tag ul. As ul comes by default in browsers with margin, as well as the most used tags p and h. And also with the arrival of -webkit is coming with -webkit-padding-start, that of the padding from left to right, like a padding-left.