12 replies [Last post]
xxangel
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

I've looked through forum posts and even followed this

http://www.pmob.co.uk/temp/3col-centred-template.htm

But, the page doesn't work.

I want the wrapper to be 100% so that the shadows on the left and right and and the white part will be dragged down to 100% of the page if there isn't enough text to fill up the entire page. Here's the test website

http://yinten.com/test

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Hello xxangel, Have a look

Hello xxangel,
Have a look at http://www.nopeople.com/CSS/full_height_column/ and see if that doesn't help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

xxangel did you really not

xxangel did you really not come across mention of the fact that you need height:100% on the html & body tags in any of those posts you found?

Excavator that linked layout suffers from the fact that height is fixed on the container for modern browsers and won't expand with content.

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

xxangel
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

I saw height 100% on the

I saw height 100% on the body tags, but when I tried it, it didn't work (I didn't seem to have seen the HTML tag).

And, even though that does work with the 100%, the shadow still doesn't work (the left shadow).

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Ooops! So it does. I never

Ooops! So it does. I never tried putting anything in it before.
I took it down till I can figure it out.

/* It's back up again... I think it works now!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Min-height excavator;

Min-height excavator; height:100%; for soppy IE6 min-height for modern browsers. feed both on the element concerned but with a filtered child selector re-set for height to 'auto' or filter plain height:100% to IE6 only.

xxangel height is needed on the html tag as well.

Problem is here that you can only extend the first element to full height maybe try something like this:

body {
  width: 95%;
  margin: 0 auto;
  background:  url(lshadow.gif) 0 0 repeat-y;
  }
#wrap {
  width:90%;
  margin:0 auto;
  }

But you'll need to test that and play around with things.

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

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

I'm confused now...must be

I'm confused now...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Did you remove a link

Did you remove a link Excavator?

From what I saw your problem with the footer is down to the fact that your using position absolute to place it as well as a few other elements you also have a float and absolute together and you cant mix the two.

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

xxangel
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

I tried your method, Hugo,

I tried your method, Hugo, except it didn't work out the way I wanted to. So, I created two more divs. But, the height problem is happening again. It isn't stretching:

http://yinten.com/test/

Wait, I just realized that wouldn't work if only the first element could be extended.

Then, could I place the two divs inside the div?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Are you sure that body

Are you sure that body method doesn't work? it seems to work for me if I set body to min-height:100%;height:auto width:93%;margin:0 auto along with the left gif. wrapper holding right gif.

I stand to be corrected though maybe I'm missing something obvious.

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

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

I did remove a link

I did remove a link Hugo,
http://www.nopeople.com/DavidStokes/
I took it down because I didn't want to hijack the thread.

It validates and it seems to work with IE6, IE7 and FF2 on both Vista and XP.
The footer is still positioned absolutely though...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You wont get anywhere with

You wont get anywhere with absolute, the common method for a full height page is to place the footer outside the full height element ensure the footer has a fixed height px or em then you add a negative margin top the same value as height to the footer to drag it back onto the screen.

You were quite correct actually, this is tending to hijack xxangels thread, which I'm encouraging , sorry xxangel.

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

xxangel
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

It's okay, thanks for the

It's okay, thanks for the help.

The problem with that is that the page isn't centered anymore. And, if you center it (with the body as 95% and margin: 0 auto), the shadow on the left is a bit too right to be centered.

But, it's okay. I started another template that doesn't make use of the shadows or the height 100%. Thanks for all the help!