Joomla article overlaps in each other when going to add new article

Question

Whenever i going to add new article in joomla dashboard, it gets overlapped. I used following code to display articles.

<div class="col-md-9">
     <div class="row">

         <jdoc:include type="component"/>

     </div>
</div>

I got articles in overlaps in each other. Instead i need to display articles in grid view. Can any one help me to resolve this problem. When I inspect html element from browser I got following code snippet in row class div.

<div class="blog" itemscope="" itemtype="http://schema.org/Blog">
    <div class="items-row cols-4 row-0 row-fluid clearfix">
        <div class="span3 col-md-3">
            <div class="item column-1" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
                <div class="pull-left item-image">
                    <a href="/textile/index.php/4-belt-fasteners"><img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl"></a>

                </div>
                <div>
                    <h3 style="text-align: center;">Belt Fasteners</h3>
                    <p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
                    <p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>

                    <p class="readmore">
                        <a class="btn btn-success" href="/textile/index.php/4-belt-fasteners" itemprop="url">
                            <span class="icon-chevron-right"></span>
                            Read more ...   </a>
                    </p>
                </div>
                <!-- end item -->
            </div><!-- end span -->
            <div class="span3 col-md-3">
                <div class="item column-2" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
                    <div class="pull-left item-image">
                        <a href="/textile/index.php/6-belt-fasteners-3"><img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl"></a>

                    </div>
                    <div>
                        <h3 style="text-align: center;">Belt Fasteners</h3>
                        <p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
                        <p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
                        <p class="readmore">
                            <a class="btn btn-success" href="/textile/index.php/6-belt-fasteners-3" itemprop="url">
                                <span class="icon-chevron-right"></span>
                                Read more ...   </a>
                        </p>
                    </div>
                    <!-- end item -->
                </div><!-- end span -->
                <div class="span3 col-md-3">
                    <div class="item column-3" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
                        <div class="pull-left item-image">
                            <a href="/textile/index.php/8-belt-fasteners-5"><img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl"></a>

                        </div>
                        <div>
                            <h3 style="text-align: center;">Belt Fasteners</h3>
                            <p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
                            <p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>

                            <p class="readmore">
                                <a class="btn btn-success" href="/textile/index.php/8-belt-fasteners-5" itemprop="url">
                                    <span class="icon-chevron-right"></span>
                                    Read more ...   </a>
                            </p>

                        </div>
                        <!-- end item -->
                    </div><!-- end span -->
                    <div class="span3 col-md-3">
                        <div class="item column-4" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
                            <div class="pull-left item-image">
                                <a href="/textile/index.php/9-belt-fasteners-6"><img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl"></a>

                            </div>

                            <div>
                                <h3 style="text-align: center;">Belt Fasteners</h3>
                                <p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
                                <p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>

                                <p class="readmore">
                                    <a class="btn btn-success" href="/textile/index.php/9-belt-fasteners-6" itemprop="url">
                                        <span class="icon-chevron-right"></span>
                                        Read more ...   </a>
                                </p>

                            </div>
                            <!-- end item -->
                        </div><!-- end span -->
                    </div><!-- end row -->
                    <div class="items-row cols-4 row-1 row-fluid clearfix">
                        <div class="span3 col-md-3">
                            <div class="item column-1" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">

                                <div class="pull-left item-image">
                                    <a href="/textile/index.php/5-belt-fasteners-2"><img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl"></a>

                                </div>
                                <div>
                                    <h3 style="text-align: center;">Belt Fasteners</h3>
                                    <p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
                                    <p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>

                                    <p class="readmore">
                                        <a class="btn btn-success" href="/textile/index.php/5-belt-fasteners-2" itemprop="url">
                                            <span class="icon-chevron-right"></span>
                                            Read more ...   </a>
                                    </p>
                                </div>
                                <!-- end item -->
                            </div><!-- end span -->
                            <div class="span3 col-md-3">
                                <div class="item column-2" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
                                    <div class="pull-left item-image">
                                        <a href="/textile/index.php/7-belt-fasteners-4"><img src="/textile/images/belt-fasteners.png" alt="" itemprop="thumbnailUrl"></a>
                                    </div>
                                    <div>
                                        <h3 style="text-align: center;">Belt Fasteners</h3>
                                        <p><span class="A32"><span style="font-size: 10pt;">We stock a vast range of belt fasteners for all thickness of belts and for a variety of applications.</span></span></p>
                                        <p><span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif';">Widths: 25mm, 38.5mm, 40mm, 50mm, 57mm, 63mm, 75mm, 89mm, 100mm, 150mm, 300mm.</span></p>
                                        <p class="readmore">
                                            <a class="btn btn-success" href="/textile/index.php/7-belt-fasteners-4" itemprop="url">
                                                <span class="icon-chevron-right"></span>
                                                Read more ...   </a>
                                        </p>
                                    </div>
                                    <!-- end item -->
                                </div><!-- end span -->
                            </div><!-- end row -->

                        </div>
                    </div>
                </div>
            </div>
        </div><!--/.container-->
    </div>
</div>

Answer 1

Add clearfix class to your parent div

like so

<div class="col-md-9 clearfix">
     <div class="row clearfix">

         <jdoc:include type="component"/>

     </div>
</div>

or

style="clear:both"