CODEWITHSUNDEEP
htmlcss
Kim
Kim

Reputation: 1175

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!

Upvotes: 3

Views: 12112

Answers (4)

Shailender Arora
Shailender Arora

Reputation: 7778

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

Upvotes: 8

Pullapooh
Pullapooh

Reputation: 161

you should use overflow:hidden; property on your wrapper.

#wrapper{
overflow:hidden;
height:auto;
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Add height: auto; to wrapper class. it works

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

Hi now give to #wrapper overflow:hidden;

as like this 

#wrapper{
overflow:hidden;
}

Demo

Upvotes: 0

Related Questions