CSS: How to fix overlapping divs

Question

I am using bootstrap to create a web site. Here is the code for navbar Edit: Fiddle http://jsfiddle.net/cb6rxu2h/

<header>

        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header col-md-4 col-sm-12">
                    <a class="navbar-brand" href="#">BargainKart</a>
                </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
                        </a></li>
                        <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
                            Sign in</a></li>

                        </ul>

                    </div> <!--container fluid-->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav pull-right">
                            <li><a href="#">About</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categories <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Electronics</a></li>
                                    <li><a href="#">Fashion</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">All</a></li>
                                </ul>
                            </li>
                        </ul>
                        <div class="col-sm-6 col-md-3 pull-right">
                            <form class="navbar-form" role="search">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search" name="q">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                </form>
                                </div>
                            </div><!-- /.navbar-collapse -->
                    </nav>

            </header>

And the code for sidebar

<div class="wrapper">
                <aside>
                <div class="categories-bar content-fluid col-md-3 col-sm-12">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li><li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li><li "><a href="#">Home</a></li>

                        <li><a href="#">About</a></li>  <li><a href="#">Shop</a></li>
                </ul>
            </div>
            </aside>

The css I've used is

aside {

    padding-bottom: 5000px;
    margin-bottom: -5000px;
    background-color: white;
    font-size: 1.5em;


}
.wrapper {

    position: relative;

    overflow: hidden;

}

I've messed up a lot but still can't figure out why the sidebar and wrapper div is overlapping into header. I can use padding but when I scale the browser there's lot of empty space for small screen browsers.

Answer 1

Since you use the navbar-fixed-top giving the body a padding of the navbars height should fix this problem. Replace XX with your value of the height in pixels.

body {
    padding-top: XXpx;
}

You can get this tip here.