bootstrap row height 100% issue

Question

I'm working on a project using the framework Twitter Bootstrap 3.

My basic HTML layout is.

• Sidebar
• Main content

The sidebar element has 100% height and float: left so that the div classed main-content stays inline.

When I give the sidebar float left property and add a row classed div in main-content div.

The height of .row goes crazy. But instead of float: left if I use position: fixed to the sidebar then the .row height gets adjusted according to content inside the .row.

I did play with the web console in Chrome and noticed that there are two pseudo elements created on row :before and :after.

When I unchecked the css property of those pseudo classes the height of the .row is to the height of the child.

Why do I have this issue when I use float: left to the sidebar?

How can I overcome it?

Did google on this, and I found this. But it doesn't help me.

Also I've created a fiddle to demonstrate the strange behaviour of the .row classed div where it extends to almost to screen of the height but there's nothing present inside the .row element.

Someone help me to get this clarified and fixed.

Thanks in advance.

---

EDIT : Why the height of the .row div is 100% when I didn't define it's height?

Answer 1

I find your mark-up a bit odd considering you are working with Bootstrap. Why don't you make use of the Bootstrap functionality to create your sidebar and main content div? This way you also don't run into unwanted "100% height divs".

Have a look: http://jsfiddle.net/GeA7N/3/

<div class="page-container">
    <div class="row">
        <div class="sidebar col-xs-4">
        </div>
        <div class="main-content col-xs-8">
            <div class="well custom-well"></div>
            <div style="background: red">Content div that is not 100% height by default</div>
        </div>
    </div>
</div>

Answer 2

Have you tried using http://www.layoutit.com as a guide for a layout? You don't have to register to use it. Once you get the columns setup correctly you can go in and and set the height of the columns with the style attribute on the div. Hope this helps a little bit