div 的高度不会随着内容而增长

Question

I've read almost every article on this forum about divs and growing height with its content. I don't understand what I'm doing wrong and can't figure it out. Probably it's an easy thing, but I just don't see it any more.

I tried the following CSS but can't get it working:

clear:both;
float: left;
overflow: auto;
overflow: hidden;

none of this all has the desired output.

I posted my code on jsfiddle: http://jsfiddle.net/eAVy3/

You will see that my footer (in red) is at the top in stead of on the bottom. The only way tho get something that looks like it is to give the id page_container a height. But that will be a fixed height and doesn't grow with the content. What to do to get this right?

Answer 1

You should reconsider making the position absolute; making the position absolute is puttinf the element out of flow so they don't occupy any height or width of the document. change to posiion : relative ; and you will start to figure it out

Update 2

try this :

    #kolom_links {
width: 400px;
height: auto;
padding-left: 10px;
}

Answer 2

Working fiddle here: http://jsfiddle.net/eAVy3/3/

Absolute positioning (absolute positioning takes the div out of the normal flow of the document, which means it can't effect other things on the page like the footer)..

You need to float your divs instead:

#kolom_links {
  float: left;
  margin-left: 100px;
}

#kolom_rechts {
  float: left;
  margin-left: 70px;
}

Now because both divs inside #page_container are floating, you need use clearfix css:

Add class clearfix: <div id="page_container" class="clearfix">

Then add this clearfix to your CSS:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Answer 3

It's a simple CSS issue: a container doesn't wrap around floated contents by default. The easiest way to make it do so it with,

.div_container {
  overflow: hidden;
}