CSS DIV not expanding when more text is added

Question

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

Solution 1

Use min-height instead of height.

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

Solution 2

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..

Solution 3

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