Why doesn’t MAIN track the height of the internal elements?

Question

Why doesn’t MAIN track the height of the internal elements?

Asked 7 years, 6 months ago

Viewed 57 times

0

I use the main to compose the main content of the site, but it does not automatically follow the height of the internal elements.

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>

From what I’ve been seeing around, the MAIN tag is not a content section element and it does not affect the document flow, that is, it has no margin, padding, edge or any other default value.

– user60252

2017/06/20 at 11:42
you use the <main> just to demarcate the main content of the document. nothing more, the ideal is not to apply styles in it.

– Leandro

2017/06/20 at 12:35

1 answer

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by Tonielton Mota • 33 points · Answer 1 · 2017-06-20T13:15:51+00:00

The float makes the element "lose" an organizational link, so it’s like it’s not part of this structure...

It is noticed that by removing the "detachment" float the main changes its size.