How to adjust a DIV within another vertical DIV? [duplicate]

Question

How to adjust a DIV within another vertical DIV? [duplicate]

Navigation

#1 by (3 votes)
#2 by (3 votes)

5

I have the following problem in CSS .. I gave you an example of what I'm trying to do Code Example, click here

I would like the <div id="divAreaMenuLateral"> that is in orange that is vertical to be inside the <div id="divAreaConteudo"> that is in red is it possible to do that ?? I do not want to center I want it to be of the same height <div id="divAreaMenuLateral"> within <div id="divAreaConteudo"> or if it increases the height from <div id="divAreaConteudo"> to <div id="divAreaMenuLateral"> automatically adjusts.

HTML Code

<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>

CSS Code

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;
}

Thanks for the collaboration

Thank you !!!!

css css3

asked by anonymous 08.07.2016 / 01:05

2 answers

HTML - How to get values from a tag How do I compare a char entry with an interval (0 to 9) without specifying individual conditions?

score 3 · Answer 1

What you can do is the following:

Place <div id="divAreaConteudo"> with property display: table; and the orange div place with property display: table-cell

DO NOT USE FLOAT

Example here . (Change the size of the red div to see it working)

score 3 · Answer 2

What happened is that the top two divs (divAreaTitulo and divAreaMenu) are dragging the divAreaMenuLateral down. I was able to fix this by inserting a new div (divContainer) and using 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;
}