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

1738 posts How's the surf doing?
  • Had an item that was trending
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Achieved the monthly Community Superstar Award
+7 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 :)

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

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

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

234 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Had an item that was trending
  • Sells items exclusively on Envato Market
+6 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 2 years
  • 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 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