Kim Kim - 1 year ago 92
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 webpage for a lesson)
and the wrapper doesn't actually wrap around the section

In order to do that I would add br

Is there a more correct way of doing this? If I add
to the section is doesn't work, I have to add it to the

Answer Source

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>

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download