Não estou conseguindo alinhar dois elementos lado a lado corretamente.
O container destas duas div
's fica como se tivesse com height: 0;
ou initial
, apenas reconhecendo a altura do elemento sem o float: left;
, que neste caso são os links de navegação.
Mas eu queria que o container respondesse também à altura do elemento <div id="logo">
, pois ele agora parece estar a comportar-se como um elemento com position:absolute;
que independentemente da sua altura, o height
do container não se expande como deveria acontecer se este elemento não tivesse qualquer float
ou position:absolute;
.
A primeira imagem é como ele está atualmente. A segunda, é como deveria de ficar.
<header>
<div id="top-bar">
<div id="logo"></div>
<nav id="menu">
<ul>
<li><a href="#">Sobre</a></li>
<li><a href="#">Trabalhos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
</header>
CSS
a {
text-decoration: none;
color: #4B4B4B;
}
div#top-bar {
background-color: #f14949;
padding: 25px 80px 25px 80px;
}
div#logo {
vertical-align: middle;
float: left;
width: 86px;
height: 51px;
background-color: #4B4B4B;
border-radius: 6px;
}
nav#menu {
text-align: right;
}
nav#menu ul {
list-style: none;
}
nav#menu li {
display: inline-block;
}