CSS DIV does not expand when adding text

Question

I have a quick CSS question, I hope someone can help me!

I have a DIV called #ContentPanel and I want it to expand so that it can serve more text if necessary. At the moment, if the text is longer than 500 pixels (as indicated in the CSS), it displays the bottom and above the content in the div below. How can I configure it to auto expand and push all div after down.

If anyone has any ideas please let me know

Here is the HTML

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

... and here is 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!

Yours faithfully,

Decbrad

Answer 1

Use min-height instead of height .

Except for IE 6: it has an error, so it interprets height as min-height .

Answer 2

As already mentioned, the problem is that you define a fixed height .. and therefore the browser adheres to this.

You need to make it more flexible using the min-height . However, IE does not support it, but due to another error in the way it handles the height (which it expands to serve content if it exceeds a certain height), it can be circumvented.

Complete solution

 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 are using absolute positioning .. if you really need it, and this is not just an attempt to solve your problem, then, unfortunately, there is no way for the element to adjust its size to serve absolute positioned elements.

Answer 3

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

Answer 4

you need to use css min-height attribute

Answer 5

The property you are in is the minimum height, not the height.

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

This means that your item will be at least tall. If this guarantees this, the height will exceed the specified value.

Answer 6

As a second option, you can try overflow: scroll; or overflow-x and overflow-y to display the scrollbar on a div if the content is not suitable.

Answer 7

Personal opinion: in order to get around IE6 problems with minimal height, it’s really better to use IE6 conditional comment in your targeting, and not add hacks to your CSS.

This is if standards compatible with CSS are important to you, although tbh is getting harder these days thanks to wky browser support.

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