Question

Is a more efficient way of doing this… for some reason I feel like this is an old way of doing this.

I have this page HERE (I'm re-creating a lynda.com webpage for a lesson) and the wrapper doesn’t actually wrap around the section id="trailInfo".

In order to do that I would add br class="br_clear" /

Is there a more correct way of doing this? If I add clear=both to the section is doesn’t work, I have to add it to the br.
Thanks!

Answer 1

Update your CSS with the overflow:hidden property inside your parent div

#wrapper {
    background-color: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

Explanation About Clearing floats

A common problem with float-based layouts is that the parent div’s doesn’t want to stretch up to accommodate the child floated div’s. If you will add a border around the parent div you’ll have to command the browsers somehow to stretch up the parent div all the way.

Now see the problem as you were facing: demo

its because you didn’t clear the floats on that time.

So the Old Solution of this problem is clear:both;

if you will add extra div after the child floated elements like mentioned below code this will clear the floats:

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child"></div>
  <div style="clear:both;"></div>
</div>

New Solution is overflow:hidden;
if you will give overflow:hidden to your parent div this will automatically clear all the child floated elements inside the parent div.

see the new solution demo: tinkerbin.com/WKqFS7Lc