CODEWITHSUNDEEP
htmlcss
user1689231
user1689231

Reputation: 107

Border Bottom property doesn't appear at the place

I am just working in a small project of mine.

Here is the url http://jsfiddle.net/KpFj2/1/embedded/result/

               <article>
                <div class="entry-meta">
                    <div class="comment"><i class="icon-calendar"></i>25 Feb 2013</div>
                    <div class="calender"><i class="icon-comment"></i>22 Comments</div>
                </div>
                <div class="post-content">
                    <h1>A New Beginning, A New Story</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
                </div>
           </article>

Now I just want one help I just wanted to know why the border bottom property doesn't go exactly where I wanted it to be ? It appears somewhere in the middle.

Can you please guide me to solve this error ?

Thanks

Upvotes: 1

Views: 101

Answers (4)

FelipeAls
FelipeAls

Reputation: 22171

You're using HTML5 Boilerplate where a .clearfix helper class already exists to solve the problem described by @Wex and @JesseLee .

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

It was described in this post from N. Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/

You just have to add this class to your article element as in http://jsfiddle.net/KpFj2/2/

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6736

set position: absolute; for #content article OR use overflow:hidden; and see.

Upvotes: 1

Jesse Lee
Jesse Lee

Reputation: 1301

You have floated the children Divs without clearing them.

There are a few options to fix it:

HTML

<article>
     <div class="entry-meta"></div>
     <div class="post-content"></div>
</article>

CSS

article { overflow: hidden; }

or

HTML

<article>
     <div class="entry-meta"></div>
     <div class="post-content"></div>
     <br class="clear" />
</article>

CSS

.clear { clear:both; }

Upvotes: 1

Wex
Wex

Reputation: 15715

You need some way to clear your floats. Add overflow:hidden to #content article

Upvotes: 1

Related Questions