Blank area to the left of side navigation bar

Question

I am trying to make a sidebar for one on my views in ASP.NET.

Im close to finished, but I get a blank space on the left of my sidebar, which results in making the width more than 100% wide (notice scrollbar)

This is when the scrollbar is opened:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="~/Content/profilePageSheet.css" rel="stylesheet" />
</head>
<body>

<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Job experience</a></li>
            <li><a href="#">Profile details</a></li>
        </ul>
    </div>

    <!-- Page content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#" class="btn btn-success" id="menu-toggle">Menu</a>
                    <h1>Profile</h1>
                    <p>
                        Lorem ipsum dolor... 
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Menu toggle script -->
<script>
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("menuDisplayed");
    });
</script>

CSS

#wrapper {
    float:left;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Sidebar */
#sidebar-wrapper {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #2C3E50;
    border: 2px solid red;
    opacity: 0.9;
    transition: .5s ease-out;
}

/* Always take up entire screen */
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}


/* Change with of sidebar from 0 to 250px */
.menuDisplayed #sidebar-wrapper {
    width: 250px;
}

/* Since we added left padding, we need to shrink the width by 250px */
.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}


/* Sidebar styling - the entire ul list */
.sidebar-nav {
    padding: 0;
    list-style: none;
}

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #ddd;
    }

    .sidebar-nav li a:hover {
        background: #afaeae;
    }

I have also tried adding this to my stylesheet:

#wrapper {
    float:left;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

Seems like a style issue to me. Since im working in Visual Studio ASP.NET, do you know if theres an automatically generated CSS-file that could interfere?

I just copied your code into a JSBin and it works as you expected http://jsbin.com/lamoxaz/1/edit?html,css,output Can you provide a snippet with the problem? — goediaz, Apr 26 '18 at 14:49
I'm using chrome as well and both fiddle and JSBin seems to display it correctly — goediaz, Apr 26 '18 at 14:54
I see that it works perfectly on the sites that you are showing. So I assume that it has something to do with the fact that i am using the Identity-template for .Net in visual studio. — CodeProg, Apr 26 '18 at 14:56
Try to make a Minimal, Complete, and Verifiable example and share it with us. — goediaz, Apr 26 '18 at 14:56
Yeah, but we are unable to reproduce this issue using the code you shared. — goediaz, Apr 26 '18 at 14:59
@goediaz Im a bit unsure how to make what you requested since i'm unsure as to where the problem would exist if it isn't in the part I show above. What you are seeing is all the CSS and HTML I have. So I am guessing that my final question is whether there could be something overriding my CSS-file somehow. — CodeProg, Apr 26 '18 at 15:06

Dark Hippo · Answer 1 · 2018-04-26T16:01:04.883

1

Though it doesn't completely answer your question, this bit

#page-content-wrapper {
    width: 100%;
    margin-right: 20%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}

May cause you some issues. You're setting the width of the element to 100%, then adding a padding of 15px to each side (since padding sits inside the block element, it's added to the width).

Also, your borders will also add to the block element width, further adding to the horizontal scroll.

edited Apr 26 '18 at 16:01

answered Apr 26 '18 at 14:58

Dark Hippo

1,245
2
16
30

By pure curiosity, i tried changing the padding to 150px to see what happened. And I dont actually think that it operates in the way that you write. Instead i think margin is what adds spacing on the outside of a block element. The padding however adds space on the inside. And adding padding on the inside of the block element would only compress the text - so no issue. You can also see the third answer to this question: https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – CodeProg Apr 26 '18 at 15:55
@Niclas Sorry, yes, you're right. It sits inside the block element, which is why it adds to the width. I clearly haven't had enough coffee today – Dark Hippo Apr 26 '18 at 16:00
No problem. But also, it doesn't seem to add to the width, because the text within the block gets compessed. 100% apparently works as a fixed size, so when you add padding, the block of text gets smaller horizontally but expands vertically. (I didnt know either) :) – CodeProg Apr 26 '18 at 16:06

Blank area to the left of side navigation bar

1 Answers1