6 replies [Last post]
danshaw
Offline
newbie
Last seen: 15 years 20 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

controlling page height

Generally don't set a height, let the content expand the div as it grows.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

danshaw
Offline
newbie
Last seen: 15 years 20 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

danshaw
Offline
newbie
Last seen: 15 years 20 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

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>

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P