Skip to main content
removeu 212 caracteres do conteúdo; tags editadas
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Segue meu HTML e CSS completo:

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

HTML completo

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">

<title>SITE</title>
<meta name="author" content="Gladison Perosini">
<meta name="description" content="Cidade Saúde">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<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>
</body>
</html>
 

Segue meu HTML e CSS completo:

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

HTML completo

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">

<title>SITE</title>
<meta name="author" content="Gladison Perosini">
<meta name="description" content="Cidade Saúde">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<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>
</body>
</html>

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

Fonte Link
Gladison
  • 656
  • 9
  • 31

Como fazer o HEADER acompanhar a altura dos elementos internos?

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.

Segue meu HTML e CSS completo:

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

HTML completo

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">

<title>SITE</title>
<meta name="author" content="Gladison Perosini">
<meta name="description" content="Cidade Saúde">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<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>
</body>
</html>