I have a little problem with the alignment of my div containers, using Bootstrap 3. There is an overlap of my left sidebar and the top navigation-bar and I don't know why. I deliberately set the z-index to a higher value to show the overlap occurring. Seems like an offset of 11px but I can't explain that. Shouldn't they be aligned edge to edge correctly automatically? The goal is to have a sidebar 220px in width and 100% length.
I wrote some code in HTML/PHP:
<?php
include 'core/includes/overall/header.php';
?>
<div class="site-holder">
<?php include 'core/includes/topNavigation.php' ?>
<div class="row">
<div class="left-sidebar">
<?php include 'core/includes/leftSidebar.php'; ?>
</div>
</div>
<?php include 'core/includes/overall/footer.php'; ?>
</div>
This is the site structure of the whole page. After including the top navigation bar I want to use the grid-system to implement a left-sidebar. The code for both is this:
TOP-NAVIGATIONBAR:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MEDIFAKTOR online</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Start</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</div>
LEFT-SIDEBAR:
<ul class="nav">
<li class="active">
<a href="#">Dashboard</a>
</li>
<li class="">
<a href="#">Test</a>
</li>
</ul>
The style.css used is:
body {
padding-top: 50px;
}
.template-setup {
padding: 40px 15px;
text-align: left;
}
.site-holder {
min-height: 1200px;
overflow: hidden;
position: relative;
}
.box-holder {
min-height: 1200px;
}
.content {
}
.left-sidebar {
font-family: 'Open Sans', sans-serif;
background-color: #BBBBBB;
color: #80969C;
width: 220px;
position: absolute;
z-index: 1050;
}