Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

header, 3 columns 100% height, footer, fixed width, css 1

Status
Not open for further replies.
ThomasJSmart

ThomasJSmart

Programmer
Sep 16, 2002
634
Is this possible in xhtml 1.1 ?

1. The site is 980px wide and centred horizontally
2. There is a header that is 200px high
3. There are 3 columns for content, each has its own colour and fills the space between header and footer.
4. There is a footer that is 30px high.

5. when the browser window is stretched or shrank the footer stays at the bottom of the window and the 3 columns stretch or shrink to keep the space between header and footer filled.

6. when 1 of the columns has lots of content that goes off-screen the other 2 columns automatically get the same height as the filled one. the footer goes off-screen and stays at the bottom of the 3 columns.



I have managed to make this layout without the 3 columns filling the height.
I have made this layout using tables.
I have made this layout using JavaScript.

but I just cant get it to work in pure CSS and divs... :(

Help?!?

Thank you



site | blog | aplis |
 
Sort by date Sort by votes
Technically speaking its not possible, though it can be faked with pure CSS and DIVs.

Its not really possible, because there's no way to tell the columns to fill the available space. You can only tell then to stretch top accommodate their content.

You can however fake the look using Faux Columns:

Basically its an optical illusion. You make the background look like the columns, while the actual divs end where the content permits, the background makes it look as if they continue down.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
You should check the code more closely. Firebug is good for this.

While it looks like an actual 3 column layout, it fakes it with a complex set of Divs, and background colors. The actual columns (the ones holding the content) don't stretch to the bottom, its faked by adding outside divs of varying dimensions and positions.

Check the code, and give the .col1 col2 col3 style a background color different to the existing ones, you'll see those divs end where the content permits. The rest of the length is faked by outside Divs.

Which brings us back to the optical illusion bit I was talking about and the current impossibility of such a layout.
Its an interesting concept, and has the benefit of being fluid but its still not the real deal.
Not a bad approach, but somewhat convoluted if you ask me.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Works on my site so I use it- seems to fill fine. I like it better than the image dependent faux columns thing.

Just a suggestion.

 
Upvote 0 Downvote
did you make any changes to it to make it fill?

if i set the height to 100% for the main holder it fills but then the filling goes all wrong if the content extends past the page. With it set to the default min-height:100% it doesnt fill (in firefox).

site | blog | iphones |
 
Upvote 0 Downvote
I don't understand "content extends past the page".

I don't think I have a height on anything except a header div I wanted to size.

Maybe I am doing it wrong. Wouldn't be the first time. It's been awhile since I laid it out so I'm sure I don't remember everything I did.

The stylesheet and coding is an embarrasing mess and I shouldn't post it or have anybody else try to decipher it. Think only kind thoughts if you look at it.
 
Upvote 0 Downvote
Sorry for not providing you a solution but I think others have done well so far. I simply have a question about the necessity of the footer stuck to the bottom.

If you have a long page that extends past the viewport, there is no problem with where the footer should be, because it will always be past the viewport. If the page is shorter, you have an option of sticking the footer immediately after text or at the bottom of the viewport. The issue is, you don't know other people's viewport.

Let's imagine someone using 1900x1200 resolution in a portrait mode. You have about 400px of content. And then, a 100px footer is stuck at 1800px. This person is very likely not going to notice this footer, because it appears too far away from their viewing range. This is an exaggeration, but with larger screens and resolutions, things like that will be more and more possible.

That's why I think it's much easier (both for coding and readers) to have the footer follow the content rather than having it stick to bottom.

If you still insist with sticking it, check this code too: Just implement it along with the other code.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Hi

its not so much about the footer though as about the 3 columns, when these 3 columns are an important part in the design its nice if they fill out. else the site looks a bit dumpy with not enough content :D


Bigred does this page fill out for you?
because its not in my firefox or IE8, i havnt checked IE7 though. Also not sure if you used this css on this page? :)


site | blog | iphones |
 
Upvote 0 Downvote
Different CSS on those interior pages. No assigned column colors. I think the structure would let me add it, I just haven't cause I didn't want it. I'll see if it will make column color version.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
655
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
537
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
572
PeDa
PeDa
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
232
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top