Putting a Border Around Floating Elements

Adding an overflow in this case with a value of hidden or auto remedies the issue.

Check the fiddle below:

http://jsfiddle.net/XMrwR/

Clearing floats the overflow way

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

CSS - border not going over elements that float left

Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this

https://jsfiddle.net/zmasvt8b/

Simply give overflow:hidden property to the parent div. Like this

https://jsfiddle.net/jv5xtLg9/

How to create a floating list of boxes with 1px border (using css)

.boxes {
   height: auto;
   overflow: hidden;
   padding: 1px 0 0 0;
   border-left: 1px solid gray;
}

.box {
  width: 200px;
  height: 50px;
  border: 1px solid gray;
  border-left: 0;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
  margin-top: -1px;
}

<div class="boxes">
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>

</div>

Adding a border to floating element causes the last div to wrap

You need to add box-sizing: border-box so that the width of border is included in width of elements, otherwise its 60% + 1px + 1px + 2 * 20% and that is more then 100%.

#container > * {  box-sizing: border-box;}#left {  width: 20%;  float: left;}#center {  width: 60%;  float: left;  border-left: 1px solid black;  border-right: 1px solid black;}#right {  float: left;  width: 20%;

<div id="container">  <div id="left">I am left</div>  <div id="center">I am center</div>  <div id="right">I am right</div>  <div style="clear: both;"></div></div>

Layout shows unexpected border around floated elements

Give display: inline-block; to .features-section instead of float:left

.features-section{
   display: inline-block; /* remove float: left */
   --------
}

Border does not extend past floated elements?

@Apostolos try this one:

.float{ display: inline-block; }

Fiddle

Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

The "Problem"

Here is a diagram, fom the w3c, showing what happens when a float overlaps borders of elements in the normal flow.

A floating image obscures borders of block boxes it overlaps.

This behavior of floating elements causes its parent element's height to do things most developers consider unintuitive.

But given that it is documented on the w3c, this is intentional: it is not a bug.

The Solution You Found

So here's the interesting rule in your CSS:

/* our Global CSS file */
header:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

This rule is targeting the <header> element, but it's also using the :after pseudo-element. The result is that it's like there was an imaginary element after <header> which you are targeting with this CSS rule:

<!DOCTYPE html>
<html>
<head>
    <!-- uncomment the line below to enable the fix -->
    <!--<link rel="stylesheet" href="css/resettemp.css" type="text/css" > -->
    <link rel="stylesheet" href="css/template.css" type="text/css" >
    <title>Teaching myself CSS, HTML. I want help understanding this bug.</title>
</head>
<body>
    <section class="content">
        <header id="contact">
            <div id="name">Name</div>

            <div id="address">
                <div>Home Address</div>
            </div>

            <div id="contact-details">
                <div><strong>Phone Number:</strong>5555 </div>
            </div>
        </header><!-- imaginary header:after element -->
        This text should be under everything else.
    </section>
</body>
</html>

This imaginary header:after "element" which is added after the <header> has a clear:both CSS property:

/* our Global CSS file */
header:after {
    clear:both; /* This property clears floating elements! */
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

So what does clear do? According to the w3c...

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

The less reliable but sometimes clearer w3schools describes clear as...

The clear property specifies which sides of an element where other floating elements are not allowed.

Since the header:after "element" has a clear:both CSS property, is will appear at the bottom of (after) any floating elements on either its left or right sides, such as your red and green boxes.

Now, that resettemp.css file seems to target almost every element imaginable with the same trick - kind of a carpet-bomb approach to solving the float-overflow problem. A better idea is to learn CSS :P

You could also use header { overflow:hidden; } - depending on your needs.

CSS: floating and surrounding common area (background/border visualisation) or why overflow: hidden?

overflow: hidden causes the container to establish a block formatting context for its contents. Without it, the floats participate in some other formatting context, having been taken out of normal flow, and therefore the floats are not taken into account when calculating the height of the container.

Once you cause the container to establish a formatting context, it will consider the floats, even though the floats are still taken out of the normal flow that is established within its own formatting context. That is stated in another section of the spec. The reason this isn't stated in the section that you link to is because it's a side effect that was never really intended, but made so due to implementation limits. See this answer (and the one that it links to) for an explanation.

Putting a Border Around Floating Elements