How to stop these two divs/navbars from overlapping in Bootstrap

Question

I've got this page that should be segmented. Using Bootstrap, there's a side block of col-sm-3 for the sidebar, and a body block of col-sm-9 for the main content. I thought if everything added up to 12 columns, everything would be OK, but when I input a nav div thing in the sideblock, it seems to just ignore the whole grid system and pushes the body block downwards, leaving a big empty space in front of the sidebar.

I'm still pretty new to all of this and haven't learned how to properly use css. I used the bootstrap CDN if that matters. Is there anyway to makes the sidebar and the main content share the same row using just the bootstrap CDN? If not, how would I go to implement the css properly in this case?

The block of html giving me problems:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      {% block side_block %}
        {% get_category_list category %}
      {% endblock %}
    </div>
    <div class="col-sm-9 col-sm-offset-3">
      <div>
        {% block body %}{% endblock %}
      </div>
    </div>
  </div>
</div> 

and the block of code rendered by {% get_category_list category %}:

{% if cats %}
  <ul class="nav navbar-sidebar">
  {% for c in cats %}
    {% if c == act_cat %}<li class="active"> {% else %} <li>{% endif %}
    <a href="{% url 'category' c.slug %}">{{ c.name }}</a></li>
  {% endfor %}
{% else %}
  <li><strong>There are no categories present.</strong></li>
  </ul>
{% endif %}

Solution 1

It is a bit difficult to tell what your issue is just by looking, but here are a couple of suggestions:

1. Check your padding, if you have any custom padding added to grid elements, make sure to add the property (box-sizing: border-box) to those which will make sure the size of the element won't grow with padding. Try to check that on your nav element as well.
2. Try to remove (col-sm-offset-3) and instead, wrap the two elements above in a row and a (col-sm-12), which will ensure that they both sit in 12 columns which might also help you find out what's happening.

This property might cause some errors, and I wouldn't recommend using it for actual development but it could help shed some light if the issue is indeed related to padding:

in your css, you can do something like:

html,html *{box-sizing: border-box !important;}

Even if this works and resolves the issue, please remove it and proceed to apply the box-sizing property to affected divs only and not html and it's children as it is never recommended to use syntax like this.

Solution 2

Your problem is that you are using offset. You don't need offset. See this JSFIDDLE.

So essentially you were doing 3(for sidebar)+3(for offset)+9(for main) which is greater than 12. If you remove the offset, bootstrap will naturally place your div alongside the sidebar and your total would be 12.

Just for completeness, your updated code:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 sidebar">
      This is the sidebar
    </div>
    <div class="col-sm-9 main">
      <div>
        This is the main body
      </div>
    </div>
  </div>
</div> 

Solution 3

The issue is occuring because you're using classes beginning with .col-sm... Classes starting with this will maintain their grid until the viewport width is less than 768px, then it will revert to a one column structure.

If you'd like to keep the grid until a smaller viewport, try changing the classes to begin with .col-xs... for example:

.col-xs-3

https://jsfiddle.net/20jhf966/

Also, have a look through the Bootstrap docs for loads more help, it's very well documented:

http://getbootstrap.com/css/#grid-options