CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NoCSStoday
NoCSStoday

Reputation: 85

CSS side menu content layered below

I'm trying to create a fixed side menu for a responsive webpage.

For some reason my other content layers underneath my menu. Why is that? Which attribute can I add to my menu to make sure all future content will stack next to the menu, so no content will slide underneath the menu. 

body {
  color: #666666;
}

.menu {
  position: fixed;
}
<script src="js/bootstrap.min.js"></script>

<div class="menu">

  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>

</div>

<div class="content">
  <p>
    contentcontentcontent
  </p>
</div>

Upvotes: 0

Views: 67

Answers (3)

Pasquale De Lucia
Pasquale De Lucia

Reputation: 188

hi can set a fixed width for the menu e calc the width of content and add float positions like this

<div class="menu">

         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>

         </div>

         <div class="content">
                  <p>
               contentcontentcontent
                  </p> 
         </div>

CSS: 

.menu {
  position: fixed;
  width: 50px;
  float: left;
}

.content {
  width: calc(100% - 50px);
  float: right;
}

Upvotes: 0

Zahid Karim
Zahid Karim

Reputation: 1886

.menu{
    position: fixed;
    height:600px;
    width:160px;
    background:#222527;
}

Upvotes: 0

Gautam Naik
Gautam Naik

Reputation: 9358

Add width to the menu, then apply margin-left to the content.

The value of margin left should be same as the width of the menu

You can also apply padding instead of margin.

body {
  color: #666666;
}

.menu {
  position: fixed;
  width: 100px;
}

.content {
  margin-left: 100px;
}
<!DOCTYPE html>

<title>Bootstrap test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="menu">

  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>

</div>

<div class="content">
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
</div>

Upvotes: 1

Related Questions