0

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>

1 Resposta 1

1

É por causa do float: left, então o elemento fica com height:0 por que os elementos interno estão com float.

Você tem que adicionar um elemento com clear: both após, pode criar um pseudo-elemento, assim:

.cabecalho_topo::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

Resultado:

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

.cabecalho_topo::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .