Holding DIV Tag

[stublackett]

Hi,

 

I've got a news page that could be X amount of pixels high, So what I need is an holding DIV tag that centres the page and allows X amount of pixels high. At the moment I have it set at 737px high as thats what the design was set at. But I need it to be extended as and when extra content is added.

 

My code at the moment is :

#wrapper {
position: relative;
margin: 0 auto;
margin-top: -14px;
width: 763px;
height: 737px;
border: solid 1px #FFCC00;
background-color: #FFFFFF;
}

#news {
position: absolute;
width: 755px;
height: auto;
left: 7px;
top: 159px;
}

 

The page I'm working on is : http://www.fpwebdesign.com/berwickrangers/test/

[dont_be_hasty]

If you set the hight to auto this might work.

 

 

height:auto;

[haku]

min-height: ___px; should do it for you. It will not let the height shrink beyond a certain point, and it will expand if necessary.

 

Unfortunately older browsers don't implement it as well.

[stublackett]

Still no joy with that either Haku. I suppose the user could just adjust the height of the DIV Tag accordingly as and when they add news?

 

I've tried adding to #wrapper the following :

#wrapper {
position: relative;
margin: 0 auto;
margin-top: -14px;
width: 763px;
border: solid 1px #FFCC00;
background-color: #FFFFFF;
min-height: 712px;
max-height: 2000px;
}

How do people do this for pages that may overlap? There must be a way ???

[haku]

What I told you will do what you want. It sets the height at a minimum height, and if the amount of content added exceeds that height, the div will expand in height. If it's not working for you, then you have some other problem. Got a link?

 

Although I should add, IE6 doesn't like min-height, so if you are testing in that browser, it won't work. But there are workarounds for that if you google them.