How to make the HEADER keep track of the height of the internal elements?

Question

How to make the HEADER keep track of the height of the internal elements?

Navigation

#1 by (1 votes)

0

I have the following problem. My header does not automatically match the height of the internal elements. So when I set css border-bottom:#DE5207 3px solid; to header it does not display because it always has a height smaller than the internal elements. I already tried to put height: auto but it does not work.

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

html css

asked by anonymous 15.06.2017 / 23:26

1 answer

How do I store more than one value using SharedPreferences? View encoding

score 1 · Accepted Answer

It is because of float: left , so the element stays with height:0 because the inner elements are with float .

You have to add an element with clear: both after, you can create a pseudo element, like this:

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

Result:

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