CODEWITHSUNDEEP
htmlcssheight
Timo002
Timo002

Reputation: 3208

div doesn't grow in height with content

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?

Upvotes: 2

Views: 6649

Answers (3)

Hiran Walawage
Hiran Walawage

Reputation: 2185

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;
}

Upvotes: 0

Rich
Rich

Reputation: 5731

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

Upvotes: 1

Aymane Shuichi
Aymane Shuichi

Reputation: 458

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;
}

Upvotes: 1

Related Questions