Thu, 2004-07-29 15:14
I have a main centred DIV with a white background that forms the main "page" that everything else goes in.
What I want to know is how to control the height of this layer, based on what content is on that page.
My initial idea was to control the height attribute inline on each individual page, but then this wont cater for text variations between browsers, or people changing font size etc.
How do you make your DIV size dependent on content?
Thanks
Thu, 2004-07-29 17:35
#1
controlling page height
Generally don't set a height, let the content expand the div as it grows.
Hugo.
Thu, 2004-07-29 18:27
#2
controlling page height
Yeh it doesnt seem to, can you have a look: My 2 styles, content centred on the page, and pagemain is the large body of text:
#content {
position:absolute;
width: 700px;
left: -350px;
margin-left: 50%;
z-index: 300;
top: 0px;
background-color: #FFFFFF}
#pagemain {
position:absolute;
width: 350px;
left: 80px;
z-index: 460;
top: 250px;}
Then:
<div id="content">
<div id="pagemain">
Loads of text in here....................
</div>
</div>
What am I doing wrong?
Thu, 2004-07-29 20:44
#3
controlling page height
The problem is likely to be the fact that both of those divs are positioned absolute which takes them out of the flow(they have no particular relationship to each other). Your first wrapper/container divs are better as static or relative positions so try working the intial layout with no positioning or relative.
Hugo.
Thu, 2004-07-29 21:04
#4
controlling page height
forgive me I am very new to this.....
The code for my #content is what I was given so it would centre all content on the page. Everything else would be put into this.
Should it be done another way? Or should #pagemain be done some way other than position:absolute so it stretches everything down?
Thanks alot
Thu, 2004-07-29 21:37
#5
controlling page height
Well it's not the way I'd centre a page, in the body set text-align:center; this will centre the wrapper/container in IE5.5; on the wrapper/container margin: 0 auto; for standards compliant browsers and text-align:left to re-align body text.
Do a search on this forum as there is quite a lot on centering pages but if it's still not clear post back and I'll go through it in more depth.
Hugo.
N.B I have seen the way you describe as a method of centering a page before but it is overly complex and starts out from a bad premise of breaking the flow of the page with position absolute.
Thu, 2004-07-29 21:57
#6
controlling page height
Hugo wrote:
N.B I have seen the way you describe as a method of centering a page before but it is overly complex and starts out from a bad premise of breaking the flow of the page with position absolute.
More importantly, it means that anyone with screen res of 800x600 will lose 50-70px from the left hand side of the page. Try reducing the width of your browser window down to see what I mean.
<shamelessplug>If you want an in-depth centering tutorial, I cover both methods on my site</shamelessplug>