twitter bootstrap clearfix push down

Question

I'm using twitter bootstrap 3, to design a layout, which has two columns, a float sidebar and a main content with a left margin relative to the sidebar size, but when I use the clearfix class in an ul element inside the main content, seems that the clearfix class, clean the sidebar(float clear) and push the ul and subsequent content down. see http://bootply.com/97603 HTML ```

Accepted Answer

add this class to your CSS:

```
.row{
    overflow:hidden; 
}
```

DEMO

it is because of your `aside`, you set fixed width to `aside` and set margin to your `main-content`, this is not right way to put element side by side. but if you use percentage width to your `aside` and `main-content` and use `float` it will look good and there is no need for `overflow:hidden` (or auto).

look at this:

DEMO

```
#sidebar{
    float: left;
    width: 20%;   /*  instead 260px */
    position: relative;
    background: #ddd;
    display: block
}

#main-content{
    background: #FFF;
    position: relative;
    min-height: 600px;
    width: 80%;   /*  instead auto   */
    float:left;   /*  added          */
}
```

twitter bootstrap clearfix push down

Solution

Problem