HTML / CSS Content Holder

Question

I'm currently building a content holder which is going to be used for new articles / news that we have.

But I'm facing an issue where the bottom of the content is falling outside of the <div> .

This is what it currently looks like:

So as you can see at the bottom, the Read More and the social icons have fallen out of the main <div> .

I think it could be to do with this part of my CSS , but I've not been able to figure out why it falls out...

.timeline-item {
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 12px;
    margin: 0 auto;
    max-width: 672px;
    min-height: 200px;
}

Please find my CSS and html code below:

 .timeline-item { background: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px; padding: 12px; margin: 0 auto; max-width: 672px; min-height: 200px; } .blog-classic-share a { display: inline-block; margin-top: 14px; font-size: 11px; color: #ff0a60; } .tag-title-post { font-weight: 700; color: #333; font-size: 13px; padding-left: 5px; } .share-wrapper { height: 50px; overflow: hidden; } .share-wrapper .share-tools ul { padding-top: 2px; } .share-tools ul li { float: left; color: #d6d6d6; font-size: 12px; } .share-tools i { font-size: 13px; } .share-tools ul li:first-child{ padding-left: 20px; } .share-tools ul li:after { content: "|"; padding-left: 20px; padding-right: 20px; } .share-tools ul li:last-child:after { display: none; } .share-tools ul li:before { display: none; } .post-content { padding: 0 25px; text-align: justify; margin-top: 30px; -ms-word-wrap: break-word; word-wrap: break-word; } .post-content p { padding: 10px 0; } .post-content-blog { border-bottom: solid 1px #e8e8e8; padding-bottom: 30px; } .image { max-width: 100%; max-height: 100%; } .button { background-color: #555555; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } 

 <div class="timeline-item"> <p style="font-size:20px"><b>This is a test title!</b></p> <div class="post-materials clearfix"> <span> <img src="images/photo-bg.png" width="20" height="20" alt="Name placeholder Image"> <span class="material-font"> by</span> <span class="author-name"> <a href="meet-the-team.html" rel="author" title="author profile"> Joe Bloggs </a> </span> </span> </div> <br> <img class="image" src="images/blue.jpg"> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div class="post-content-blog"></div> <div class="continue-reading pull-left"> <a class="button" href="#">Read More</a> </div> <div class="blog-classic-share pull-right clearfix"> <div class="pull-left"><a class="open-share" href=""></a></div> <div class="pull-left share-wrapper"> <div class="share-tools pull-left"> <ul> <li><a href="http://www.facebook.com/sharer.php?u=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Facebook"><img src="images/facebook-icon.png" width="20" height="20" alt="Facebook Share Icon"></a></li> <li><a href="http://twitter.com/share?url=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Twitter"><img src="images/twitter-icon.png" width="20" height="20" alt="Twitter Share Icon"></a></li> <li><a href="http://pinterest.com/pin/create/button/?source_url=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Pinterest"><img src="images/pinterest-icon.png" width="20" height="20" alt="Pinterest Share Icon"></a></li> <li><a href="https://plus.google.com/share?url=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Google Plus"><img src="images/google-plus-icon.png" width="20" height="20" alt="Google Plus Share Icon"></a></li> </ul> </div> </div> </div> </div> 

Appreciate any help.

Answer 1

After the section with die buttons you have to add:

<div class="clearfix"></div> 

Your cancel the floating and the buttons will stay inside the div.

Answer 2

添加类的clearfix到timeline-item容器保持浮动pull-left孩子向外部流出。