CSS Making the content DIV Auto size after the content within

Question

I am currently trying to design a website template for me, the problem is that I can't get the Content div to auto expand on the content that is within it.

I wanted it to auto resize so I don't need to set the CSS height manually.

The CSS Code I have made:

#Container {
    position: relative;
    width: 800px;
    height: 100%;
    margin: 0px auto 0 auto;
    text-align: left;
    padding-left: 1px;
    cursor: de;
    border-left: 1px solid #000001;
    border-right: 1px solid #000001;
    border-top: 1px solid #000001;
    border-bottom: 1px solid #000001;
    background-color: #C1E9FF;
}
#LogoContainer {
    background-image: url('/media/Logo.png');
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-color: rgb(0,0,1);
    border-bottom-color: rgb(0,0,1);
    border-right-style: solid;
    border-bottom-style: solid;
    width: 400px;
    height: 50px;
    position: absolute;
    z-index: 1;
}
#LikeBar {
    border-bottom-width: 1px;
    border-bottom-color: rgb(0,0,1);
    border-bottom-style: solid;
    width: 400px;
    height: 50px;
    position: absolute;
    left: 400px;
    z-index: 1;
}
#ButtonHome {
    background-image: url('/media/Bt.png');
    width: 100px;
    height: 30px;
    position: absolute;
    top: 50px;
    z-index: 1;
}
#ButtonVideo {
    background-image: url('/media/Bt.png');
    width: 100px;
    height: 30px;
    position: absolute;
    left: 105;
    top: 50px;
    z-index: 1;
}
#Footer {
    border-top-width: 1px;
    border-top-color: rgb(0,0,1);
    border-top-style: solid;
    width: 800px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    text-align: center;
}
#Content {
    position: absolute;
    top: 90px;
    width: 800px;
    height: 95%;
    border-top: 1px solid #000001;
}
#YouTubeBox {
    position: absolute;
    background-image: url('/media/Box.png');
    width: 100px;
    height: 30;
    left: 10px;
    text-align: center;
}
#TwitterBox {
    position: absolute;
    background-image: url('/media/Box.png');
    width: 100px;
    height: 30;
    left: 110px;
    text-align: center;
}
#FaceBookBox {
    position: absolute;
    background-image: url('/media/Box.png');
    width: 100px;
    height: 30;
    left: 210px;
    text-align: center;
}
.DivT { line-height: 1px }

HTML Code with the DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title>HTML CODE</title>
  <meta name="description" content="Null" />
  <meta name="keywords" content="Null" />
  <link href="ThemeV1.css" rel="stylesheet" type="text/css" />
</head>

<body background="/media/Background.png">
  <div id="Container">
    <!-- Start Container -->

    <div id="LogoContainer"></div>

    <div id="LikeBar"></div><!-- Menu Controls -->

    <div id="ButtonHome"></div><!-- WEBSITE CONTENT -->

    <div id="Content">
      <p class="DivT">We're upgrading the website with a new design and hopefully it will
      be faster, so check back later.</p>
    </div><!-- END WEBSITE CONTENT -->
    <!-- Footer -->

    <div id="Footer"></div><!-- End Footer -->
  </div><!-- End Container -->
</body>
</html>

So, what is wrong? I want to save time to not set the height manually.

Do you _really_ expect anyone to go through and read the CSS you posted? Please, consider your readers when posting a question. Help is [here](http://jsbeautifier.org/), [here](http://procssor.com/process) and [here](http://infohound.net/tidy/). — Bojangles, Dec 05 '11 at 17:58
You could make a http://jsfiddle.net with your code. At least that way we can see what it does. — Ben Clayton, Dec 05 '11 at 18:02

score 8 · Accepted Answer · answered Dec 05 '11 at 18:17

8

Since your div#Content is absolutely positioned within div#Container, the container will ignore the height and width of the content when determining its own dimensions. Try giving div#Content a position value of relative. Then, as mentioned in the comments above, switch its height property to min-height. If you need to stick with absolute positioning and still want a content-affected height, you'll have to use JavaScript to adjust the style.height of the containing div when the height of the content div changes.

answered Dec 05 '11 at 18:17

Aaron

5,137
1
18
20

this doesn't seem entirely correct to me - as far as I know absolutely positioned elements won't ignore the widht/height of their content. – ptriek Dec 05 '11 at 18:25
You are indeed correct. However, block elements with any positioning will ignore the width/height of their absolutely-positioned children. So, even if the Content div expands to fit its content, the Container div surrounding it will not. – Aaron Dec 05 '11 at 18:30

score 4 · Answer 2 · answered Dec 05 '11 at 18:09

4

It looks like you have set the height of your content height manually:

#Content {
...
    height: 95%;

Remove the height, and its height will be whatever is necessary to hold its (non-floated) contents.

answered Dec 05 '11 at 18:09

Paul D. Waite

96,640
56
199
270

score 0 · Answer 3 · answered Dec 05 '11 at 18:21

If you want something to re-size then a div without any height attribute set automatically re-sizes to the height of the content contained with in it. If you want it to be at least XXXpx tall or fit the screen a certain way then use the min-height attribute. That will fix the height so that it displays in the desired area if the text is too small and will expand if the text is larger than the minimum setting.

You have so many heights described here that I am not going to go into all of them but I would adjust these at minimum:

#Container { min-heigh: 100%;}
#Content { min-height: 95%; }

* Note - min-height and min-width are not supported by IE6;

Also the positioning of the elements can cause a lot of issues with your height as they can take the element out of the standard flow of datat, and it's not really necessary if you set your layout properly unless you need to do something specific like setting a z-index or wanting a fixed background that scrolls with the site.

CSS Making the content DIV Auto size after the content within

3 Answers3