3 Column full height(100%)

HTML & CSS
1

Hey guys & girls!

I’m am developing a site with PHP and CSS.

I want to have a 3 column layout with “div”, like this.

[Left Border][Head][Right Border]

[Left Border][Body][Right Border]

[Left Border][Footer][Right Border]

Left and Right border needs to be a 100% of the page, so when contents expands the borders needs to.

And the body need to fill the page 100% even if no contents is displayed.

The total width is 900px and centered.

I can’t figure out how, I have tried height: 100%, min-height:100% etc.

I have searched and searched the internet for over a week now without a solution.

Do any body got an idea or solution for this? -I’m desperate!

Sorry for the bad English!

  • Alex
2

Whats in the left and right border? Just a solid color or an image?

3

The left and right borders, is just a “div” with a background image…?

4

Sounds like you just need a sticky footer. Here http://www.visibilityinherit.com/code/sticky-footer-demo.php

Then just put a header in there and put the background image on the body. That will be your borders. That all should adjust nicely to any size width. Depending on your image that is.

5

Hmm… Yeah thats a way to do it.
But what about the “body” div that need to expand?

6

Well if it’s just an image you can apply it strait to the body with repeat-y (not a div). But you want the body (the border image) 100% height too right? I guess I would need to see the image or think on it some more.

7

Hi the site of Paul O’Brien has quite some different options for a 100% height website with the requirements you mentioned