Kim Kim - 4 months ago 7
CSS Question

div not wrapping

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

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

Comments