Estou com o seguinte problema. Meu header
não acompanha a altura automaticamente dos elementos internos. Com isso quando defino o css
border-bottom:#DE5207 3px solid;
para o header
ele não exibe, pois fica sempre com altura menor que os elementos internos. Já tentei colocar height: auto
mas não funciona.
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
div.principal{
background-color: #ccc;
margin: auto;
box-sizing: border-box;
}
/* CABEÇALHO */
.cabecalho_topo{
border-bottom:#DE5207 3px solid;
height: auto;
}
/* Logomarca */
figure.logo{
float: left;
width: 21.42857142857143%; /* 300px */
height: 80px;
background-color: #FF8922;
}
/* Formulário de busca no Guia Comercial */
section.frmbuscaguia{
float:left;
width: 39.28571428571429%;
height: 80px;
background-color: #FF8922;
text-align: center;
}
section.frmbuscaguia h1{
font-size: 16px;
color:#222;
text-align: center;
padding: 2% 2%;
}
section.frmbuscaguia button{
background-color:#F4F4F4;
border: 0px;
padding: 5px;
box-sizing: border-box;
}
section.frmbuscaguia input{
background-color:#F4F4F4;
border: 0px;
padding: 5px;
box-sizing: border-box;
}
/* Menu do topo */
.menutopo{
float: left;
background-color: #FF8922;
width: 39.28571428571429%;
height: auto;
}
.menutopo a{
color:#ffffff;
text-decoration: none;
font-size: 15px;
}
.menutopo ul{
margin: 0px;
padding: 0px;
}
.menutopo ul li{
float:right;
display: inline;
padding: 0 20px 0 20px;
line-height: 79px;
}
.menutopo ul li:hover{
background-color: #DD6900;
}
<div class="principal">
<header class="cabecalho_topo">
<figure class="logo">
<img src="./imagens/logo.png">
</figure>
<section class="frmbuscaguia">
<h1>Buscar no Guia Comercial</h1>
<form>
<input type="text" name="buscar">
<button type="submit">Pesquisar</button>
</form>
</section>
<nav class="menutopo">
<ul>
<li><a href="#" title="Quem somos">QUEM SOMOS</a></li>
<li><a href="#" title="Anuncie">ANUNCIE</a></li>
<li><a href="#" title="Contato">CONTATO</a></li>
</ul>
</nav>
</header>
</div>