div doesn't grow in height with content

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?

Think you need to read about `absolute` positioning: http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/ — naththedeveloper, Oct 14 '13 at 13:09
bodycontainer 1 and 2, which I'm guessing you want to run side by side are both 1000px wide, inside a div 1000px wide. Surely they should be 500 each? — Michael, Oct 14 '13 at 13:13
@Michael: No, they should be underneath each other! That fine so! Rich's answer fixed my problem! — Timo002, Oct 14 '13 at 13:35

score 1 · Answer 1 · answered Oct 14 '13 at 13:03

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

score 1 · Accepted Answer · answered Oct 14 '13 at 13:09

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

I didn't need a
. It works with only the CSS addition of Rich! Tnx man! I know the HTML isn't that great, but it's 3 years old and doing some CSS is easier than rebuilding it! — Timo002, Oct 14 '13 at 13:34

score 0 · Answer 3 · answered May 16 '20 at 12:52

0

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

answered May 16 '20 at 12:52

Hiran Walawage

2,048
1
22
20

div doesn't grow in height with content

3 Answers3