[CSS] DIV Dynamic Height

Conrad11

Conrad11

Conrad11

Soldato
Joined
12 Jun 2005
Posts
5,361
Hi there,

I am in the process of creating a PHP site which has dynamic content in it.

Some of the content can be really big, others small.

Is there any way so that I can set a certain height, and if it needs to expand it to make room for more text, it does so?

Is there any other solutions?

Thanks...

[edit]

As my 11p host has failed me :(, I am developing this site locally so I can't provide a link, but here is a picture:



As you can see the text has overlapped because I have set the DIV to a certain height. Is there any way I can make it so it automaticallly makes the DIV bigger?

Thanks...
 
Last edited:
Divs will expand to give you the height you need. As for setting a minimum height, try the min-height css property.

Also have a look at this CSS min-height hack, which I found after around 2 seconds of googling....
 
Last edited:
Conrad11 said:
Why hasn't it in my case then? Is it because I have set a height in CSS?
Click to expand...

Correct.

When you set a fixed height, the browser will render the page as such. If you wish it to be rendered as a fixed height element, and keep everything in the same div, apply overflow: auto; to the div in question. This will add a scroll bar to the div to acommadate the extra markup.

If you don't want a fixed height, remove the height property.

If you want to set a minimum height, use the min-height property.
 
Hi there,

I have been trying the Min-height element first and it seems to work in IE, Firefox and Opera fine (so I am guessing the hack is for the older versions of the browser).

What I am having trouble with now is getting the Right Nav Bar to increase retrospectivly to the main section. I have tried applying the min-height to the container DIV with no success.

What do you suggest I do?

Thanks...
 
Hi there,

I can see the principle behind the "Faux-Columns" technique, but I am unsure how to apply it to my design.

I cannot apply this technique to the background as there is already a background image there and I don't want it to reach the bottom of the page (if you don't understand what I mean by this, refer to image at top). I want the page to be a block on the screen so you can see the background image all around it.

As I have tried applying this technique to a DIV previously, only using a background Colour (white) as that is the only colour I need, I am unsure what to do?

I have a container which contains everything (apart from the header). I have no set that height as I expect the content to expand it accordingly as said above by Sloth unless I misunderstood. I have also set the background colour of this DIV to white; but still I get the main bulk column larger than the right column, unless I am coding incorrectly.

Thanks...

[EDIT]

Using the technique you suggested, it seems to work in IE but not in FF or Opera.
 
Last edited:
Hi there,

I just did a quick simple code for what I am doing and it seems that FF and Opera do not have the DIVS as transparent and if I try setting the background as transparent in the CSS that doesn't work either.

When I set no colour of the DIVS apart from the container it just shows the background colour.

What you would get in FF and Opera:



What you would get in IE (What I want):



Thanks...
 
Hi there,

I still haven't managed to fix this problem, I have tried using a background image for the DIV instead of a background colour, and I get the same thing.

Anyone found or know of any solutions yet?

Thanks...
 
You must log in or register to reply here.
Back
Top Bottom