Three column help for a beginner!

[vertigogen]

Hi

I'm trying to design a simple three-column website using html and an external stylesheet.

I have a header of 750px wide, navbar underneath is the same width, both centred.

Now I want to put three columns underneath (left and right 150px wide; middle to fit the remaining space), lined up with the left and right edges of the header/navbar. At the bottom, I want to add a footer right across to match the navbar.

I've just realised that I can't easily position the left and right columns on the page because I don't know how big the viewer's screen will be, so can't say what margin size should be.

There must be a way of lining everything up.

Any advice?

Ta.

[Ganon11]

I'm moving this thread to the HTML forum.

There should be some variables that will let you access the current screen width/height. Using this, you can say 1 column will take up 33% of the width, so position them at 0% of the width, 33% of the width, and 66% of the width to get even spacing. From there, you can adjust to see what looks good.

The website will access the current screen based on who is accessing, so it will always take up a proportional amount of space.

[AricC]

Do you have any code written? We generally don't write that much code for people here is a link if you are interested in learning HTML.

Aric

[vertigogen]

Do you have any code written? We generally don't write that much code for people here is a link if you are interested in learning HTML.

Aric

Yeah, I've started writing the code but I think I need to know the best way to go about making the layout before doing too much. I don't want anyone to write the code for me - just point me in the right direction.

I guess what I want is something that will display more or less full screen on 800 wide monitor, and will display same width but with bigger margins left and right on a bigger monitor.

To keep the content (although possibly not the header) displaying OK in a smaller window, I was planning to make the middle column flexible size (using 100% I guess) to fill the gap available, and the left and right columns fixed width. What I'm stuck on is how to go about positioning the L and R columns.

I've read about "containers" in css stylesheets but haven't found a tutorial that covers what I want to know yet. I'm guessing that it's possible to make a centred, 750px wide container and stick all the other elements into it, keeping it all nicely lined up. That's what I'm hoping anyway!

The idea of finding out the screen size and working on percentages from there sounds great - is there a piece of code I can put in to find this? But will it work if someone opens a smaller window on their desktop?

Cheers

Genny

[vertigogen]

Just found this, which looks like it might be the answer!

guide-to-three-column-layouts

Will go and try it out.

Genny

[drhowarddrfine]

That link doesn't work. Please fix it. (Edit: Fixed)

There are a lot of three column examples around.

[Ganon11]

Just found this, which looks like it might be the answer!

guide-to-three-column-layouts

Will go and try it out.

Genny

There was a simple typing error. This should be a functional link.

[vertigogen]

Sorry for posting a bad link.

Here's where I'm up to. I've been messing about with Holly & John's Source Ordered Columns and have managed to create something with header, navbar, three columns of the widths I wanted and a footer, all using percentages for widths so that it will hopefully shrink and stretch to size.

It's going well... so far... except for the lengths of the three columns. The middle one isn't a problem because I've made it the same colour as the background, but the right and left columns are a different colour and I'd really like it if they reached the footer, irrespective of how much content is in them (there will always be some).

All the containers are floating and the first two columns are enclosed in a wrapper as per Holly & John's instructions.

Any suggestions would be much appreciated, or pointers to where I can find this information.

Many thanks

Genny

[drhowarddrfine]

Faux Columns

A lot of people like this method but I've never used it. There are other things that can be done but I don't have an example or link right now.

[vertigogen]

I've managed to put what I've done so far up here
Think that this is a place anyone can go and look.

Left-hand column is still too short (only tested in firefox so far), and various attempts to sort it out (height percentages and repeat-y backgrounds) don't seem to have had the desired effect.

Genny

[drhowarddrfine]

Well, the right column is not in the same div as the other two; or do you need it that way? Not that it solves the problem but it's the only reference the other two would have.

[vertigogen]

Well, the right column is not in the same div as the other two; or do you need it that way? Not that it solves the problem but it's the only reference the other two would have.

I think john and holly's instructions were to set it up that way - make the container a percentage of the whole width and float it left; float the middle column in the right hand side of that; float the left column in the left hand side and then add the right column in the empty space on the right. Dunno why.

If I make the containing div 100% wide, I wonder if I can float all three columns in it and will that solve the problem?

[AricC]

If I make the containing div 100% wide, I wonder if I can float all three columns in it and will that solve the problem?

What do you mean float the columns?