1121 posts
  • 2 Years of Membership
  • Affiliate Level 1
  • Author Level 2
  • Collector Level 3
+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.

1763 posts How's the surf doing?
  • Power Elite Author
  • Trendsetter
  • Top Monthly Author
  • Community Superstar
+10 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 :)

1121 posts
  • 2 Years of Membership
  • Affiliate Level 1
  • Author Level 2
  • Collector Level 3
+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
  • 2 Years of Membership
loveetc
says

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

1121 posts
  • 2 Years of Membership
  • Affiliate Level 1
  • Author Level 2
  • Collector Level 3
+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 :|

252 posts
  • Elite Author
  • Author Level 8
  • Weekly Top Seller
  • Trendsetter
+7 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
  • 2 Years of Membership
  • Exclusive Author
johnfotios
says

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

36 posts
  • Collector Level 1
  • Exclusive Author
  • United Kingdom
  • 2 Years of Membership
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