0

Utilizo o main para compor o conteúdo principal do site, porém ele não acompanha automaticamente a altura dos elementos internos.

main{
  background-color: #444;
  max-width: 1200px;
  width: 100%;
  height:auto;
  margin: 0px auto;
}

*{
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}
div.principal{
  margin: auto;
  box-sizing: border-box;
}

/* CABEÇALHO */

header.cabecalho_topo{
  height: auto;
}
header.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;
}

/* Super banner */

figure.superanuncio{
    max-width: 1200px;
    width: 100%;
    height: auto;
    max-height: 500px;
    margin: 0px auto;
    clear: both;
}
figure.superanuncio img{ /* para redimensionar a imagem */
    max-width: 1200px;
    width: 100%;
    max-height: 500px;
    height: auto;
}

/* Barra de informações */

p.barrainformacao{
  width: 100%;
  max-width: 1200px;
  min-height: 45px;
  margin: auto;
  background-color: #FF8922;
  font-size: 22px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  margin-top: 5px;
}

/* Banner rotativo */

figure.anunciorotativo{
    max-width: 1200px;
    width: 100%;
    max-height: 180px;
    height: auto;
    margin: 5px auto 5px auto;
}
figure.anunciorotativo img{ /* para redimensionar a imagem */
    max-width: 1200px;
    width: 100%;
    max-height: 180px;
    height: auto;
}

/* Menu principal */

nav.menuprincipal{
  width: 100%;
  height: 50px;
  max-width: 1200px;
  background-color: #FF8922;
  margin: auto;
}
nav.menuprincipal a{
  color:#ffffff;
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #FF8922;
}
nav.menuprincipal ul{
  list-style: none;
  position: relative;
}
nav.menuprincipal ul li{
  width: auto;
  float: left;
}
nav.menuprincipal a:hover{
  background-color: #DD6900;
}

/* MENU DESTAQUES */

.menudestaques{
  width: 100%;
  height: 50px;
  font-family: 'Arial';
  font-size: 13px;
  max-width: 1200px;
  margin: auto;
  margin-top: 10px;
}
.menudestaques a{
  color:#222;
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: center;
}
.menudestaques ul{
  list-style: none;
  position: relative;
}
.menudestaques ul li{
  width: auto;
  float: left;
}


main{
  background-color: #444;
  max-width: 1200px;
  width: 100%;
  height:auto;
  margin: 0px auto;
}

/*
section.conteudoprincipal{
  float: left;
  width: 885px;
  height: auto;
  background-color: #ccc;
}

/* Notícia principal */

figure.propagandarotativa img{ /* para redimensionar a imagem */
    float: left;
    max-width: 885px;
    width: 100%;
    max-height: 280px;
    height: auto;
}
article.noticiaprincipal h1{
  width: 881px;
  display: block;
  font-size: 30px;
  color: #3b3b3b;
  padding: 10px;
}

/* Anúncio fixo na principal */

figure.anunciofixo img{
  float: left;
  margin-top: 10px;
  max-width: 885px;
  width: 100%;
  max-height: 120px;
  height: auto;
 }

/* Acesso rápido */

p.acessorapido{
  float: left;
  width: 885px;
  margin-top: 5px;
  padding: 15px;
  background-color: #888;
  font-size: 18px;
  box-sizing: border-box;
}

/* Menu rápido */

nav.menurapido{
  float: left;
  width: 100%;
  max-width: 885px;
  background-color: #FF8922;
  }
nav.menurapido a{
  color:#ffffff;
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: left;
  background-color: #FF8922;
}
nav.menurapido ul{
  list-style: none;
  position: relative;
}
nav.menurapido ul li{
  width: 295px;
  float: left;
}
nav.menurapido a:hover{
  background-color: #DD6900;
}

/* Destaques turísticos */

section.destaquestutisticos{
  float: left;
  width: 885px;
  height: 200px;
  margin-top: 10px;
  border: 2px #555 solid;
  box-sizing: border-box;
}

figure.destaquestutisticos_comidastipicas{
  float: left;
  width: 200px;
  height: 150px;
  padding: 10px;
  font-size: 16px;

}
figure.destaquestutisticos_comidastipicas a{
  text-decoration: none;
  text-align: center;
}

/* Imóveis em destaque */

section.imoveisdestaques{
  float: left;
  width: 885px;
  height: 230px;
  margin-top: 10px;
  border: 2px #555 solid;
  box-sizing: border-box;
}

section.imoveisdestaques h1{
  font-size: 25px;
  padding-left: 15px;
  padding-top: 5px;
}
section.imoveisdestaques a{
  text-decoration: none;
  color: #555;
}

figure.imoveisdestaquesguarapari{
  float: left;
  width: 200px;
  height: 150px;
  padding: 10px;
  font-size: 16px;

}
figure.imoveisdestaquesguarapari a{
  text-decoration: none;
  text-align: center;
}

/* Lateral */

aside.lateral{
  float: right;
  width: 25%;
  max-width: 300px;
  max-height: 1200px;
  height: auto;
  background-color: #222;
}

/* Rodapé */

footer.rodape{
  width: 100%;
  height: 200px;
  background-color: #222;
  border-top: 3px #000 solid;
  clear: both;
}
<main role="main">
<section class="conteudoprincipal">

        <article class="noticiaprincipal">


            <figure class="propagandarotativa">
            <h1>Título da notícia</h1>
                <img src="./noticias/001.jpg" width="885" height="280" title="Propaganda rotativa">
            </figure>

        </article>

        <figure class="anunciofixo">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="885" height="120" title="Anúncio fixo">
                </a>
        </figure>

</section>

<section>   

        <p class="acessorapido">
            Acesso rápido
        </p>

        <nav class="menurapido">
            <ul>
                <li><a href="#" title="Areias monazíticas">- Areias monazíticas</a></li>
                <li><a href="#" title="Artesanatos">- Artesanatos</a></li>
                <li><a href="#" title="Cachoeiras">- Cachoeiras</a></li>
                <li><a href="#" title="Comidas Típicas">- Comidas Típicas</a></li>
                <li><a href="#" title="Empregos">- Empregos</a></li>
                <li><a href="#" title="Horários da coleta de lixo">- Horários da coleta de lixo</a></li>
                <li><a href="#" title="Horários de ônibus">- Horários de ônibus</a></li>
                <li><a href="#" title="Hospedagens">- Hospedagens</a></li>
                <li><a href="#" title="Imóveis">- Imóveis</a></li>
                <li><a href="#" title="Lagoas">- Lagoas</a></li>
                <li><a href="#" title="Mapa de Guarapari">- Mapa de Guarapari</a></li>
                <li><a href="#" title="Onde Comer">- Onde Comer</a></li>
                <li><a href="#" title="Onde Hospedar">- Onde Hospedar</a></li>
                <li><a href="#" title="Parques ecológicos">- Parques ecológicos</a></li>
                <li><a href="#" title="Pontos de Mergulho">- Pontos de Mergulho</a></li>
                <li><a href="#" title="Praias">- Praias</a></li>
                <li><a href="#" title="Taxi">- Taxi</a></li>
                <li><a href="#" title="Telefones úteis">- Telefones úteis</a></li>
                <li><a href="#" title="Templos religiosos">- Templos religiosos</a></li>
                <li><a href="#" title="Turismo Rural">- Turismo Rural</a></li>
                <li><a href="#" title="Vida noturna">- Vida noturna</a></li>
            </ul>
    </nav>

    </section>

    <section class="destaquestutisticos">

        <figure class="destaquestutisticos_comidastipicas">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Comidas típicas">
                <figcaption>Comidas típicas</figcaption>
                </a>
        </figure>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Parques">
                <figcaption>Parques</figcaption>
                </a>
        </figure>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Praias de Guarapari">
                <figcaption>Praias</figcaption>
                </a>
        </figure>

        <figure class="destaquestutisticos_comidastipicas">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Turismo rural">
                <figcaption>Turismo rural</figcaption>
                </a>
        </figure>

    </section>


    <section class="imoveisdestaques">

    <a href="#">
    <h1>Imóveis em Guarapari</h1>
    </a>

        <figure class="imoveisdestaquesguarapari">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Comidas típicas">
                <figcaption>Comidas típicas</figcaption>
                </a>
        </figure>

        <figure class="imoveisdestaquesguarapari">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Parques">
                <figcaption>Parques</figcaption>
                </a>
        </figure>

        <figure class="imoveisdestaquesguarapari">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Praias de Guarapari">
                <figcaption>Praias</figcaption>
                </a>
        </figure>

        <figure class="imoveisdestaquesguarapari">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="200" height="150" title="Turismo rural">
                <figcaption>Turismo rural</figcaption>
                </a>
        </figure>

    </section>



</main>

2
  • Pelo que andei vendo por ai, a tag MAIN não é um elemento de seção de conteúdo e ele não afeta o fluxo do documento, ou seja, ele não tem margin, padding, borda ou qualquer outro valor padrão.
    – user60252
    20/06/2017 às 11:42
  • você usa o <main> apenas para demarcar o conteudo principal do documento. nada mais, o ideal é não aplicar estilos nele.
    – Leandro
    20/06/2017 às 12:35

1 Resposta 1

0

O float faz o elemento "perder" um vinculo organizacional, por isso é como se ele não fizesse parte desta estrutura...

Percebe-se que removendo o float da section "destaquestutisticos" o main altera seu tamanho.

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 .