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