CSS DIV not expanding when more text is added

Question

Hi there...

I have a quick CSS question, i'm hoping that somebody can help me out!

I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.

If anybody has any ideas, please let me know

Here's the HTML

<div id="MainContent">
    <div id="MainImage"></div>
    <div id="ContentPanel">Text content goes here.</div>
</div>

...and here's the CSS

#MainContent {
    position:relative;
    height:500px;
    width:800px;
    margin:0 auto;
    background-color: #000;
}

#MainImage {
    position:absolute;
    top:0;
    left:0;
    width:350px;
    height:500px;
    background-color:#000;
}

#ContentPanel {
    position:absolute;
    height:500px;
    top:0;
    left:350px;
    width:450px;
    background-color:#000;
}

Thanks in advance!

Kind regards,

Decbrad

Answer 1

you need to use min-height css attribute

Answer 2

Use min-height instead of height.

Except for IE 6: It has a bug, so that it interprets height like min-height.

Answer 3

Try setting a minimum height (min-height:) as opposed to a specific, fixed height.

Answer 4

The property you're after is min-height, rather than height.

http://www.w3schools.com/CSS/pr_dim_min-height.asp

This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.

Answer 5

As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.

Answer 6

As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..

You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..

A complete solution is

height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/

This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..

Answer 7

Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.

This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.

<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->

Answer 8

Hi Gaby, thanks for your advice, you're right, no matter what I do, the text is still flowing over the divs below. Min-Height might be the answer when absolute positioning is not used.

That said my wrapper DIV #MainContent has position:relative. Can this not be styled so that all DIV's underneath are pushed downwards?

Any help on this would be a god send! Very tight deadline! ;o(

kind regards Decbrad