Estou criando um rodapé para uma página html. Ele é bem simples e composto por uma ÚNICA linha. Gostaria de que uma parte, que contém as informações de Copy, ficasse alinhada à margem esquerda e outra, que contém um menu, ficasse alinhada à margem direita do site.
Separei o texto em duas divs
e dei um float: right
na segunda. Acontece que não estou conseguindo alinhar as duas partes verticalmente de modo que pareçam estar na mesma linha.
Seguem os códigos:
HTML
<section id="rodape-legal">
<div class="rodape-legal" id="rodape-legal-copy">
<h6>Copyright © 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;
}