Question

So I’m creating a layout for my site. I’m having trouble with displaying my site entries/posts. Here is my source code:

<div id="post-101" class="post-101 post type-post status-publish format-standard hentry category-Information category-Update">

    <h2 class="entry-title">
        <a href="http://localhost/bleachin/?p=101">TITLE</a>
    </h2>

    <div class="entry-content">
        CONTENT
    </div><!-- .entry-content -->

    <div class="entry-meta">
           META
             </div><!-- .entry-meta -->
   </div><!-- #post-101 -->


 <div id="post-100" class="post-100 post type-post status-publish format-standard hentry category-Information">

    <h2 class="entry-title">
        <a href="http://localhost/bleachin/?p=100">TITLE 2</a>
    </h2>

     <div class="entry-content">
        CONTENT
     </div><!-- .entry-content -->

     <div class="entry-meta">
        META
    </div><!-- .entry-meta -->
    </div><!-- #post-100 -->

Theoretically this should work correctly. But when I’m trying to add a border on .post, everything turns weird. Here is how it looks with .post { border-bottom:10px; }

https://i.stack.imgur.com/GzS55.png

I have tested it with Chrome and Firefox (as majority of my members are using those). Both result in same weird look.

Any help on this?

Answer 1

Add overflow: auto; to the class for .post.

I bet the post contains floated elements that overflow it’s parent div (in your case .post). Add overflow:auto; to your .post div and it will contain the floated elements within by clearing the floats.

CSS

.post { 
  border-bottom:10px;
  overflow: auto;
}