How to adjust a DIV inside another DIV vertically?

Asked

Viewed 1,818 times

5

I’m having the following problem with CSS.. I sent you an example of what I’m trying to do Example of the Code, click here

I would like the <div id="divAreaMenuLateral"> that this in orange that is vertically inside the <div id="divAreaConteudo"> that is in red Is it possible to do this ?? I don’t want to center want it to stay of the same height <div id="divAreaMenuLateral"> within the <div id="divAreaConteudo"> that is if increase the height of <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;
}

Thank you for your cooperation

Thank you !!!!

css css3

  • Improved a lot. Just need to see if the indicated link is not enough to solve.

2 answers

3

What you can do is the following:

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

DON’T USE FLOAT

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

  • ta almost Leonardo !!!! it worked 99% srsrs I changed the height and it worked perfectly, It only has 1 detail, it stayed on the right side, as I can do to stay on the left side ?

  • @Gustavocastilho arranged the example link. What I did was take the div in html and put it right as first. Hugs.

3

What happened is that the two upper Ivs (divAreaTitulo and divAreaMenu) are dragging the divAreaMenuLateral down. I managed 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;
}

Browser other questions tagged css css3

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