Question

I’ve been working on a web application using Bootstrap, and have come across odd behaviour in my columns that I cannot seem to figure out.

Most of the CSS I’m using is just Twitter bootstrap defaults. I’ve attached screenshots of the HTML structure and the problem itself.

The Issue

It appears that the first div in my main-content div is expanding to match the size of the sidebar, which makes no sense to me.

Also upon further investigation it appears that each child within my #main-content div contains the following CSS, which causes the issue. How might I circumvent it?

.row-fluid:after {
    clear: both;
}

.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
}

.row-fluid:after {
    clear: both;
}

Here is the actual page: http://d.titanlabs.ca/ai2/test.html

Answer 1

May be i know the reason just give float to your #main-content also. write like this:

#main-content {
    float:left;
    margin-left: 45px;
    padding: 25px 0;
    width:860px;
}

UPDATED

#main-content{
   margin-left: 45px;
   overflow:hidden;
}