804 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 1-2 years
  • Philippines
  • Referred between 1 and 9 users
  • Sold between 100 and 1 000 dollars
uziiuzair says

Okay so I have never seen this issue before as I have been using this method for a long time now.

Assuming the following CSS and HTML codes I am going to recreate the issue:


<div id="content"> <div id="main">left</div> <div id="sidebar">right</div> </div>

* { margin: 0; padding: 0; } body { background-color: blue; } #content { width: 960px; margin-left: auto; margin-right: auto; margin-top: 10px; background-color: green; height: auto; } #main { float: left; width: 60%; height: 80px; } #sidebar { float: right; width: 30%; height: 80px; }

Okay so with this code, I am supposed to get a webpage of blue background and a 960 width div of green floating in the middle. the green div should be 80px high as the divs inside have that height.

Thats what my theory suggests.

But when ever I use this, instead of the green div with a height of 80px; I get a green div, but with roughly 20px of height. and the 2 other divs are aligned left and right inside the green div.

I am not sure if I was clear enough, If you get what I mean please help, otherwise I would be uploading an image in a few minutes explaining what I am trying to say.

Thanks.

1174 posts How's the surf doing?
  • Forum Superstar
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • United Kingdom
  • Referred between 200 and 499 users
  • Exclusive Author
  • Has been a member for 3-4 years
+2 more
tommusrhodus says

If you want a decent answer, make a working example of your issue on;

http://jsfiddle.net

It definitely helps people to help you :)

804 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 1-2 years
  • Philippines
  • Referred between 1 and 9 users
  • Sold between 100 and 1 000 dollars
uziiuzair says

If you want a decent answer, make a working example of your issue on; http://jsfiddle.net It definitely helps people to help you :)

Sorry about that, I was just working on it.

here you go, http://jsfiddle.net/97THj/1/

As you can see, I gave the #content id a background color of green. But it does not appear at all. If you define a height it would certainly give you a green background but height: auto; does not work

148 posts
  • Has been a member for 1-2 years
loveetc says

You need to set overflow for the #content and then it will work. See this: http://jsfiddle.net/DPdEE/

804 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 1-2 years
  • Philippines
  • Referred between 1 and 9 users
  • Sold between 100 and 1 000 dollars
uziiuzair says

You need to set overflow for the #content and then it will work. See this: http://jsfiddle.net/DPdEE/

Oh thanks :D It works :D

Though I dont seem to get the logic behind it :|

114 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Bought between 100 and 499 items
  • Referred between 50 and 99 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Has been a member for 2-3 years
nagaemas says


You need to set overflow for the #content and then it will work. See this: http://jsfiddle.net/DPdEE/

Oh thanks :D It works :D

Though I dont seem to get the logic behind it :|

It’s because you have two divs that floats to the left and right inside the container. Basically floated elements are removed from the normal content flow, making your container div renders as if there’s no other elements inside it.

You could fix it by adding

<div style="clear: both;" />

after your sidebar div, but the recommended way is to use an easy fix called clearfix on the container, which you can find easily by Googling :)

More about clearfix: http://stackoverflow.com/questions/8554043/what-is-clearfix

5 posts
  • Exclusive Author
  • Has been a member for 1-2 years
johnfotios says

Your code works fine for me, once I’ve added overflow:hidden; to #content

36 posts
  • Exclusive Author
  • United Kingdom
  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
JoeMcKie says

Make a class called “clearfix”, and use the following code:

.clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }

Then use this class on the container div (in this case, the body tag) that contains the floated elements. It’ll clear itself and you don’t need to edit the container CSS.

OR

Use this code :

/* You can also use a <br class="clear" /> to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

and add a
just before the closing tag of the container.

by
by
by
by
by
by