Align two divs vertically after using float in one of them

Navigation
3

I am 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 another part, which contains a menu, to be aligned to the right margin of the site.

I separated the text in two divs and gave a float: right in the second. I happen to be unable to align the two parts vertically so 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;
}
    
asked by anonymous 15.12.2017 / 21:07

2 answers

2

From margin: 0 to tag ul . ul comes by default in browsers with margin , as well as the most commonly used p and h tags. And also with the arrival of -webkit is coming with -webkit-padding-start , which from padding from left to right, as if it were a padding-left .

    
15.12.2017 / 21:18
2

You need to remove% with% of margin within% with% of right%: 

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

This <ul> native of div is creating a vertical space in margin .

You also need to set a <ul> of the same font size to fit 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 suggested setting div to every line-height and other settings: 

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>
    
15.12.2017 / 21:17
Delete php session when closing browser Pointer is lost at function output