3 columns & 3 rows

[Rodders]

I am working on a new site layout. I have achieved a nice 3 column layout so that the centre column varies in width according to the page width. I think it will work with most or all browsers.

I now need to get a 3rd row to fit at the bottom of the viewable area. For example, an area which is 160px high and stretches the entire viewable area from left to right.

The centre 'cell' then would vary in height and width according to the window size.

http://www.total-image-nation.co.uk/test.html

So far, i am close when I view with FireFox but IE doesn't seem to let the scrollbar appear on the centre cell - ID=centerarea



Any suggestions?

[toicontien]

It looks like you're trying to emulate a frame layout. You might be interested in this article: CSS Frames (http://www.cssplay.co.uk/menu/framed.html)

[Rodders]

Those are nice layouts however I'm not really seeing how they do anything similar to what I would like.

Essentially I would like 3 rows.

The top row will contain a logo and a login form.

The center row will contain some special interest content on the left, a main content portion in the centre and then the main menu on the right. The left and right sections must remain constant width so the center portion needs to adjust according to page width. This is working.

The third row will contain some sponsors' links and our copyright info. In IE, if the main content is large then the div expands to accommodate it which then overlaps the 3rd (bottom) row. I'd like the bottom row to always be visible and the center row to alter in height to accommodate it.

[kiathau]

use <table> element

the last row, <tr valign="bottom">

Kiat Hau,
http://webidiot.blogspot.com, Let's build your web site

[toicontien]

Those are nice layouts however I'm not really seeing how they do anything similar to what I would like.
No, that page does not have the exact layout you want, but it does explain the method by which it can be achieved. Use absolute positioning. Read the article I linked to and you'll get the main idea. Then do some playing around.

[Rodders]

Yes, you are right! I didn't see all the layout examples before. Thanks for having the patience to give me a second shove in the right direction!

I'll post back my findings....

[toicontien]

No problem :D Happy playing!

[Rodders]

Right.....I'm getting somewhere but not as smoothly as I'd have liked.

I feel like I'm getting back into old habits of using pixels to define lengths. Is it bad?

here's what i've got so far - click (http://www.total-image-nation.co.uk/test2.html)

Here's what I'd like to add:

1) a "1px solid #fd9a00" border around the main content of the page - that's the bit in the middle that says "Welcome to Total....."
the border needs to have all edges visible, but the content can scroll inside of that - i don't want to lose the bottom border if the content is too big

2) the images at the foot of the page need to move down a bit, but i can't seem to get them any lower!?

3) on Mac/Explorer, the images at the foot of the page disappear when you make the screen wider! they move down and to the right until they are not visible anymore


Any help is greatly appreciated


Rich

PS- there must be a more simple way of doing this, or is it my layout design that is very complicated?

[Rodders]

I thought I'd update this thread to show where I'm up to. I'm reasonably happy with it, although I haven't tested it on many browsers yet.

http://www.total-image-nation.co.uk/new/

One thing that bugs me is that all the symbols (eg. £ ' etc) are shown as ?

Why?

[ray326]

Charset mismatch? Use numerical entities for them. How are you coding them now, just directly from the keyboard?

[Rodders]

The characters that are causing a problem are just simply typed into the code. Can anyone provide a useful resource for the correct "numerical entities" and some instruction on how to use them? Thanks

[ray326]

http://webdesign.maratz.com/lab/utf_table/