How can a div not overlap another div?

Asked

Viewed 665 times

-1

I have a div that is my vertical menu, next to it I want to put a div that fills all the remaining space that will be where will load my content, but what happens is that one div is overwriting the other when I decrease the browser size:

I posted a Jsfiddle with css pro post not getting so long

<div class="row ">
    <div class="col col-sm-2">

      <ul class="side-menu">

      <div class="side-menu-user-infos">
          <div class="side-menu-user-photo">
              <img src="" alt="">
          </div>
          <div *ngIf="(user$ | async) as username; else login">
              <div class="side-menu-user-name">
                  {{ username.username }}
              </div>
          </div>
          <div class="side-menu-user-options">
              <i class="fas fa-user-cog"></i>
              <i class="fas fa-power-off" (click)="logout()"></i>           
          </div>

      </div>

      <li>
          <a>
              <span class="fas fa-chalkboard"></span>
              Menu
          </a>
      </li>
      <li>
          <a>
              <span class="fas fa-user-plus"></span>
              Menu
          </a>
      </li>
      <li>
          <a>
              <span class="fas fa-cart-plus"></span>
              Menu
          </a>
      </li>
      <li>
          <a>
              <span class="fas fa-store"></span>
              Menu
          </a>
      </li>    
      <li>
          <a>
              <span class="fas fa-file-alt"></span>
              Menu
          </a>
      </li>    
      <li>
          <a>
              <span class="fas fa-chart-bar"></span>
              Menu
          </a>
      </li>    
      <li>
          <a>
              <span class="fas fa-cog"></span>
              Menu
          </a>
      </li>   
   </ul>
</div>

<div class="content">
    <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
</div>



<router-outlet></router-outlet>

My Jsfiddle: https://jsfiddle.net/cxbdpw8r/1/

html css div

  • does so in the content puts a width Until you think it’s good, over it overlapping the menu leaves responsive, enters this site https://mydevice.io takes the size of your screen and divides content / tamanho da tela and so for all Ivs, remembering that erases the value dps of the comma counts two houses and at the end of the result puts the sign %, research on media queries and viewport

1 answer

2


Face I’ll be honest, your code was a bit messy so I preferred not to use it to answer you, until the Bootstrap already suggests an option to make a Dashboard of this type as you can see here: https://getbootstrap.com/docs/4.3/examples/

inserir a descrição da imagem aqui

When you choose to use one framework type the Bootstrap you have to keep in mind that you must follow some system rules! And perhaps the main rule is the Grid system...

I made this template trying to customize as little as possible the CSS, I believe I checked in a result that can help you a lot.

inserir a descrição da imagem aqui

Follow the image code above.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .menu {
      position: fixed;
    }
    .conteudo {
      height: 200vh;
    }
    @media screen and (max-width: 576px) {
      .col-2 {
        background-color: blue;
      }
    }
  </style>
</head>

<body>

  <nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid pt-5">
    <div class="row mt-1">
      <div class="col-2 col-sm-3 menu">
        menu
      </div>
      <div class="col-10 col-sm-9 ml-auto conteudo bg-danger">
        conteúdo
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

  • Sensational, Hugo, that’s exactly what I was getting at, my code’s pretty messed up? Can I get a previous result using my css + your example?

  • Another question, it is worth using bootstrap in the development of an application or it limits me in some rules as you said in the reply and so I should choose to use only css?

  • 1

    @Fernandomunhoz sim da para vc continuar usando parte do seu CSS no Bootstrap, mas minha dica sempre é que tente usar o máximo do Bootstrap para preciso fazer o mínimo de CSS extra... That would save you time and avoid a bug like the one you were having. In Col-2 you can try to put your list and see how it behaves, most likely is that you will need to remove some Csss and not do others... And Bootstrap is a good tool, but you have to know how to use, a read in the documentation will help you a lot https://getbootstrap.com/docs

Browser other questions tagged html css div

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