Why does MAIN not track the height of internal elements?

Question

Why does MAIN not track the height of internal elements?

Navigation

#1 by (0 votes)

0

I use main to compose the site's main content, but it does not automatically track the height of the inner 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>

html5 css3

asked by anonymous 20.06.2017 / 12:39

1 answer

CSS property increase width How to store the distinct elements that occur in another vector?

score 0 · Answer 1

0

The float makes the element "lose" an organizational link, so it's as if it was not part of this structure ...

Note that by removing the float from the section "highlights" the main changes its size.

20.06.2017 / 15:15