834 posts
  • Has been part of the Envato Community for over 1 year
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
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.

1290 posts How's the surf doing?
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 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 :)

834 posts
  • Has been part of the Envato Community for over 1 year
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
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 part of the Envato Community for over 1 year
loveetc says

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

834 posts
  • Has been part of the Envato Community for over 1 year
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
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 :|

116 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
johnfotios says

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

36 posts
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
  • Has been part of the Envato Community for over 1 year
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