5

Estou com o seguinte problema no CSS.. mandei um exemplo para vocês do que estou tentando fazer Exemplo do Código, clique aqui

Gostaria que a <div id="divAreaMenuLateral"> que esta em laranja que esta na vertical fique dentro da <div id="divAreaConteudo"> que esta em vermelho é possível fazer isso ?? Eu não quero centralizar quero que fique do mesmo height <div id="divAreaMenuLateral"> dentro da <div id="divAreaConteudo"> ou seja se aumento o height da <div id="divAreaConteudo"> a <div id="divAreaMenuLateral"> se ajusta automaticamente.

Código HTML

<html>
<header>
   <title>ERP</title>
</header>
<body>
<div id="divAreaSite">
   <!--span id="AreaSite"> Area Site</span-->
   <div id="divAreaConteudo">
      <!--span id="AreaConteudo"> Area Conteudo</span-->

      <div id="divAreaTitulo">
         <span id="AreaTitulo"> Area Titulos</span>
      </div>
      <div id="divAreaMenu">
         <span id="AreaMenu"> Area Menu</span>
      </div>
      <div id="divAreaMenuLateral">
         <!--span id="AreaMenuLateral"> Area Menu Lateral</span-->
      </div>

      <div id="divAreaDados">
          <!--span id="AreaDados"> Area Dados</span>

          <!--div id="divVendas">
              <span id="AreaVendas"> Vendas</span>
          </div>

          <div id="divVendasDados">
              <span id="VendasDados"> Vendas Dados</span>
          </div-->
      </div>
   </div>
</div>
</body>
</html>

Código CSS

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#divAreaSite {
    background-color: #1f3ff0;
    width: 100%;
    height: 100%;
}

#divAreaConteudo {
    background-color: #f03a45;
    margin-left: 3%;
    margin-right: 3%;
    width: 90%;
    height: 60%;
}

#divAreaTitulo {
    background-color: #76f0cb;
    width: 100%;
}

#divAreaMenu {
    background-color: #2ff062;
    width: 100%;
}

#divAreaMenuLateral {
    background-color: #f0a75c;
    height: 100%;
    width: 20px;
   // float: left;
}

Agradeço a colaboração

Obrigado !!!!

1
  • Melhorou bastante. Só precisa ver se o link indicado não é suficiente pra resolver.
    – Largato
    Commented 7/07/2016 às 23:37

2 Respostas 2

3

O que você pode fazer é o seguinte:

Coloque o <div id="divAreaConteudo"> com a propriedade display: table; e a div laranja coloque com a propriedade display: table-cell

NÃO USE FLOAT

Exemplo aqui. (Mude o tamanho da div vermelha para ver funcionando)

2
  • ta quase Leonardo !!!! funcinou 99% srsrs alterei a altura e funcionou perfeitamente, Só tem 1 detalhe, ele ficou do lado direito, como posso fazer para ficar do lado esquerdo ? Commented 8/07/2016 às 0:03
  • @GustavoCastilho arrumei o link de exemplo. O que eu fiz foi pegar o div no html e colocar ele logo como primeiro. Abraços. Commented 8/07/2016 às 0:16
3

O que aconteceu é que as duas divs superiores (divAreaTitulo e divAreaMenu) estão arrastando a divAreaMenuLateral para baixo. Consegui arrumar isso inserindo uma nova div (divContainer) e usando flexbox:

<html>
<header>
   <title>ERP</title>
</header>
<body>
<div id="divAreaSite">
   <!--span id="AreaSite"> Area Site</span-->
    <div id="divAreaConteudo">
      <!--span id="AreaConteudo"> Area Conteudo</span-->

        <div id="divAreaMenuLateral">
         <!--span id="AreaMenuLateral"> Area Menu Lateral</span-->
        </div>
        <div id="divContainer">
            <div id="divAreaMenu">
                <span id="AreaMenu"> Area Menu</span>
            </div>
            <div id="divAreaTitulo">
                <span id="AreaTitulo"> Area Titulos</span>
            </div>

            <div id="divAreaDados">
              <!--span id="AreaDados"> Area Dados</span>

              <!--div id="divVendas">
                  <span id="AreaVendas"> Vendas</span>
              </div>

              <div id="divVendasDados">
                  <span id="VendasDados"> Vendas Dados</span>
              </div-->
            </div>
        </div>
   </div>
</div>
</body>
</html>

CSS:

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#divAreaSite {
    background-color: #1f3ff0;
    width: 100%;
    height: 100%;
}

#divAreaConteudo {
    background-color: #f03a45;
    margin-left: 3%;
    margin-right: 3%;
    width: 90%;
    height: 60%;
    display:flex;
}
#divContainer {
  flex:1;
}

#divAreaTitulo {
    background-color: #76f0cb;
    width: 100%;
}

#divAreaMenu {
    background-color: #2ff062;
    width: 100%;
}

#divAreaMenuLateral {
    background-color: #f0a75c;
    height: 100%;
    width: 20px;
   // float: left;
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .