Topic: Just a quick question... (Page 1 of 1)

(now, you know when you hear that that you're going to come up against a question which the person asking believes is simple, but is in fact far more complicated than they think)

I'm trying to achieve a certain CSS layout, in a liquid type.

It's going to be adapated from this: http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

My layout will have both header and footer, will only have two centre columns, one of a fixed width, the other taking up the rest of the space. A 20px margin will exist between each div.

Now, here's the trick...I want to put my footer at the bottom of the browser window, my header at the top, and have my two centre dovs take up the rest of the intervening space. The left column div will have overflow: hidden and the right column div will have overflow: scroll in order ot prevent them growing any longer than their specified minimum height.

The page I posted just above works on the principle of not defining the width of the centre column, but making it fill the space between the left aligned nad right aligned divs on either side of it.

So what I really want to know is, is there some way I can align my header to the top, and align my footer to the bottom and make the two centre divs fill the space between them (minus the margin widths, of course)?

Skaarjj: The answer is yes you can probably make that layout - my advice would be to have a go at making it and then if you have problems post it here and we'll have a look at it and throw ideas in.

See this layout for ideas:
http://development.gurusnetwork.com/discussion/thread/2412/

___________________
Emps

The Emperor dot org

Skaarjj: I'm not sure I followed what you're trying to do. It sounds to me like you want to create a header and a footer, give them "position" fixed" and a "z-index" high enough that they will be over the rest of the page. You can then create the rest of the page as you normally would and allow it to scroll under the header and footer.




-- not necessarily stoned... just beautiful.

Hyperbole: Not quite. The layout I'm looking at (and it's not one that's entirely of my design. I've been given specifications to follow, and this is one of them) won't allow the page to scroll at all. No div will sit under any other div. In fact, like the example I posted above, there will be a margin in between each one. The page won't scroll becuase none fo the layout will go off it. When the content in the content div gets too big the content div itself will scroll, not the page. None of the layout will grow or shrink. It will always stay the same size (unless you switch resolutions of course, this being a liquid layout).

Emps: Thanks, someone pointed me to that last night, and it is almost what I'm looking for, except the for the fact that everything buts up against each other, there's three columns instead of two and it scrolls when the content gets too big. The layout I'm looking at must be fixed. I tried modifying that layout to fit, but it confuses me. When I add simple things to it, like a margin aorund each of the divs, they either don't appear, or they become absurdly huge.

Skaarjj:

quote:

---

Emps: Thanks, someone pointed me to that last night, and it is almost what I'm looking for, except the for the fact that everything buts up against each other, there's three columns instead of two and it scrolls when the content gets too big. The layout I'm looking at must be fixed. I tried modifying that layout to fit, but it confuses me. When I add simple things to it, like a margin aorund each of the divs, they either don't appear, or they become absurdly huge.

---

Those modifications should be fairly straightforward - I'd recommend you have a few goes at modifying that and post it over at the GN (possibly in a new thread) and Paul should be able to point out where you are going wrong with his layout.

___________________
Emps

The Emperor dot org

ok...will do

OK...this is what I have so far:
http://members.iinet.net.au/~skaarjj/index.htm

I'm going ot post this at the GN as well. It looks fine in Mozilla and IE at the 2 resolutions I can test easily. So, I know there are going to be faults in other resolutions and it looks very strange in Opera, so if any of you care to have a gander at the code and try fixing it yourselves or suggesting what I can change, go ahead. if you're just going ot report a fault, it'd be a big help if you could take a screen-shot for me.

Thanks

I think the reason it looks strange in Opera on most resolutions is that the width of the 'middlebox' and 'leftbox' exceed 100%, so the 'middlebox' is pushed bellow the 'leftbox'.

Had a little go with it and I managed to get it working in both Mozilla and Opera on resolutions down to 800x600. What I did was mostly to convert your margins to %. Both Mozilla and Opera have good support for % margins and paddings, but IE usually makes a mess out of them. So I moved the px margins to the 'IE hack area', but since I don't have IE here to test it on I doubt it will work without some more tweaking.

Another thing that you'll see is that the width of the 'middlearea' is less than what it was. Had to decrease the size to get it working in 800x600...
http://www.golden-ratio.net/GurusOzone/threeCol.htm

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

not sure if I follow entirely, but I'm going through the "abandon tables and go all css" transition and I found a great site . That has examples and great articles....