1

So this is one of my CSS3 lines:

body{
    width: 1500px;
    border: 2px solid black;
    text-align: left;
    margin: 20px auto;
}

However, I have an Article in HTML, and when I write float:left on my CSS file, the border that's supposed to cover it stops right before the article starts, on the top.

Can anyone help me with this issue? I want the border to surround everything.

Code123
  • 167
  • 2
  • 2
  • 8
  • When you float an element, you remove it from the document flow. This means the parent (`body`, in this case), doesn't know the `article` even exists. So the parent's height collapses as though it were empty. You need to look into [***clearfix***](http://stackoverflow.com/search?q=clearfix) methods. One simple solution is to add `overflow: auto` to `body`. – Michael Benjamin Aug 22 '16 at 20:32
  • After the close of your floated element, at the *same level*, put `
    `. **For example:** `
    `     – Tyler Roper Aug 22 '16 at 20:34

1 Answers1

0

Here is the clearfix snippet I use. Add this to the top of your css. 

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

Like one of the commenters said. When you float an item, it disrupts the natural block level of the elements. What this means is, elements that are block level sit on top of each other, and elements that are inline, are well in a line.

So when you float items to the left, the parent div may collapse. To fix it, we add clearfix to the parent.

Honestly, you should post more of your code so we can see what's actually going on, but more than likely this will fix your issue.

Add clearfix class to your parent div (after adding it to your css)

What I mean is add it to whatever element your article is inside --

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

I think this question has been answered all over SO, here is one post that will help- How do you keep parents of floated elements from collapsing?

Community
  • 1
  • 1
wdfc
  • 364
  • 4
  • 9