How can use Bootstrap clearfix for clearing floats?

Question

I have a WordPress theme in my single.php page. Below follows the HTML code:

<div class="container">
    <div class="row">

        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <div id="single-post">
                single post content
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div id="sidebar-area">
                sidebar area
            </div>
        </div>

    </div>
</div>

CSS code:

#single-post,
#sidebar-area {
    margin:10px auto;
    background: #fff;
    border: 1px solid #d7d7d7;
    padding: 15px;
}

Image Presentation

enter image description here

When my single post content height is shorter than the side bar area, some of sidebar widgets goes to under the single content area. How can I show all sidebar widgets within sidebar area if the sidebar taller than single content by using Bootstrap clearfix class?

Use bootstrap grid to make 8 (any content on left) and 4 (your sidebar) collums divs and everything that you put into 4 col div will be here and doesn't matter how long will be your sidebar. Maybe I just didn't understand you question - sorry then - but why u wanna use clearfix? — Northys, Nov 06 '14 at 23:40
simple example that should help you - if i understood you http://www.bootply.com/teLpSeImf6 — Northys, Nov 06 '14 at 23:46

score 1 · Accepted Answer · answered Nov 07 '14 at 10:07

Thank you for reply me but my problem it is solved i used this grid below within my sidebar widget because it is repeated with every widget and i removed the code and pasted within sidebar.php file and my problem solved and all widgets shown in sidebar area

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>

How can use Bootstrap clearfix for clearing floats?

1 Answers1