1043 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.

1585 posts How's the surf doing?
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Had an item featured on Envato Market
  • Made it to the Authors' Hall of Fame
+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 :)

1043 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/

1043 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 :|

158 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Made it to the Authors' Hall of Fame
+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 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 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by