Variable height layout

Hi,
Please take a look at the following page... http://www.workbygee.co.uk/proofs/spencerdavis/test.html

I am trying to make it so that the white 'page' background stretches to accomodate the content of the site, but as you will notice it does not.

The way I have designed it thus far is as follows:

I have created a wrapper div to contain and center all of the page content. This div has a background image that repeats vertically and forms the sides of the 'page' image in the background.

I have then placed another div at the top and the bottom of the layout, one z-index higher, to create the top of the page image and the bottom with the peeling corner. The bottom image is set in the css to position absolutely to bottom:0; and left:0; so that it always sits at the bottom of the browser window.

All of the layout elements are nested within the wrapper in the hope that it will then stretch to accomodate all the content.

I have given the body a height value of 100% and the wrapper div the same.

It works to the extent that the layout stretches to the height of the browser window but it doesn't stretch any further if the content overflows, as you can see. If you resize the browser window to be smaller it adjusts the size of the layout, but only when making it smaller.

I'm sure there is a simple answer to this but it is completely eluding me. Any help or suggestions would be greatly appreciated. I appreciate I may also be going about this in completely the wrong fashion so am open to suggestions of a different strategy.

If you need to see the css it is here... http://www.workbygee.co.uk/proofs/spencerdavis/style_spencerdavis.css

Many thanks for your time,

gee

Really quick reply cos i'm watching Top Gear on Dave...

In the content div, set the background image tot he url of the image, along with "bottom". eg: background: url(image.gif) bottom;

The container div for the content should have a background set to repeat-y, which contains the image for the straight part of the paper (the part at the top half).

Hope that makes sense.

Cheers,
Karl

web design, development & seo by DigitalVibe

Hi Karl,

Thanks for the assistance...

I have tried what you said but its still not working. I have uploaded the new version to the same URL.

Changes I have made:

I have nested all of the content in a div named 'content' this is in turn nested in the div 'wrapper'.

In the 'wrapper' div I have a background of the sides of the page on repeat-y. In the 'content' div, I have set the background for the bottom of the page as you said. The height of the 'content' div is 100%.

It all shows up fine and but still when content overflows the content div does not stretch. The layout is stretching to the height of the browser window but will not stretch any further.

Any further thoughts?

Perhaps there is a way i could do it whereby the image at the bottom of the page (the curling paper) is 'shunted' downward by the content above, the content would not overlap with the image which would be fine.

Many thanks for your help,

gee

That may be because the height declaration is still in there. Try removing height:100% from the body, #wrapper, and #content blocks in the css file. They should scale themselves according to the height of the page.

As a last resort, if you're okay about having the curled part as a seperate chunk at the bottom, then yes you could add it to the bottom as a seperate div.

Cheers,
Karl

web design, development & seo by DigitalVibe

Also, if you defnitely need it to be *at least* a certain height, you could use the "min-height:" declaration.

min-height could be a swine to get working when considering historical browser css support. It's something i honestly avoid... in my life, site structure is governed by the length of the content, not the other way around.

Have a look here for css support problems for min-height and ways around it

Cheers,
Karl

web design, development & seo by DigitalVibe

I've now tried taking the height declarations out but the background images just disappear!

I've decided not to have the curl as a seperate chunk as it is a bit of a large void if it is.

So any last suggestions, Karl or anyone?!

Many thanks,

gee

I haven't looked at this (busy with other stuff), but this sounds like a problem typically associated with floats. If you put a clearing element in after the content, it may force the layout to behave as you want. Example:

<br style="clear:both" />

-- si-blog --

Yep, that sould solve it.

A common hack is to use something like this:

.clearer {clear: both;}

<div class="clearer"><span></span></div>

or

.clearer {clear: both;display:none}

<div class="clearer">.</div>

What that will do is force the wrapper to pull down properly. As scjessey says, it's usually a float issue.

Additionally, make sure you test in Firefox, and maybe Opera too.

Cheers,
Karl

web design, development & seo by DigitalVibe

Unfortunately, that test page shows that the issue isn't floats at all, but rather, absolute positioning. That means the clear trick won't work.

GEE:
Unfortunately, I don't have any terribly good solutions to the absolute positioning issue, either. I can see a few possibilities, though:

1) Use floats for the columns and use the clear trick mentioned above.

2) If you can determine ahead of time that one of the columns will always be taller than the rest, don't absolutely position it. Then, the container will expand to fit that single column's height, and because the other columns are always smaller, they'll fit nicely. If it's not a sure thing, though, then this solution is probably a bad idea, as Murphy's Law will surely guarantee that whatever column you think will usually be taller than the rest never is.

3) Keep the columns as they are and

overflow:auto

on the container. Possibly, wrap only the columns inside a smaller container and set

overflow:auto

only on that new, smaller container. That will give you vertical scroll on the contents of the "page" in the first case, or just the columns in the second case, while leaving your "page" sitting right where it's at. You can then use z-indexing to make sure things overlap correctly. If you go this route, I'd further suggest dropping your height from 100% to 95% or so, as 100% causes the window to vertical scroll in Firefox.

None of these give you exactly what you want, alas, but maybe one of these ideas will be at least sufficient.

Bad me! - I must admit i didn't study the css, just agreed with the most common pitfall.

I never use absolute positioning these days. Can't think of a time when i've ever needed to, and in a way it defeats the object of the flexibility of css designs over tables. I used it when i first made the move from tables to css, but eventually I broke out of the rigid structure mindset.

Cheers,
Karl

web design, development & seo by DigitalVibe