FF: Three columns (resolved)

Hi,

I'm going to redo my Asp page layouts, and I'd like to try a three column view (this time :) )

Now I have installed FF at work which only allows it to view local pages (proxy is locked off) so its very useful for me :).

Anyway I've got the following:

Code:

<html> <head> <title> == == Vince`s == ASP == Website == == </title> <link rel='stylesheet' type='text/css' href='./styles.css'> </head> <body>   <div id='middlecol'> Main disp </div> <div id='copyright'> Copyright © 2004 </div> </body> </html>

CSS of:

Code:

/* Three columns Left column Some menu items Middle main display Right adverts external links */ /* Default stuff */ body { color: #ddd; background: #000; margin: 0; padding: 0; } a { color:aaf; text-decoration:none; font-weight: bold; } a:hover { color: #111; background: #aaa; } /* Left col */ #leftcol { width: 128px; border: solid 1px #ff0; float: left; } /* Right Col */ #rightcol { width: 128px; border: solid 1px #ff0; float: right; } /* middle col */ #middlecol { width: 100%; margin: 0 132px 0 132px; border: solid 1px #ff0; } /* subsections */ table.subs { width: 90%; } table.subs tr { vertical-align: middle; } table.subs td { text-align: center; } /* Copy right */ #copyright { border: dotted 1px #05f; text-align: right; font-variant: small-caps; font-size: 75%; padding: 0 32px 0 0; clear:both; } /* General Classes */ .iefixcenter { text-align:center; }

Firefox has made the middle section 100% wide BUT with the margin of 132px on the left (the right doesn't work?!?) it shoves it off the screen.

1) Do I need to change the Css a bit to make it fit? Should the width be auto?
2) How would I get it centered and with a max width of the screen- 264px?

Vince

Here's a simplified version:

css:

Code:

<style type="text/css"> body{ margin: 0; padding: 0; } #left{ width: 128px; float: left; background-color: #993300; } #content{ background-color:#0099CC; } #right{ width: 128px; float: right; background-color: #993300; } </style>

html:

Code:

<body> <div id="left">left</div> <div id="right">right</div> <div id="content">content</div> </body>

And what's the table for in your code? Not for layout purposes I hope? If it's a list of links you should consider using a <ul> to format them.

Hope this will suit your needs.

edit:
For a more flexible solution you could also use this slightly more complicated layout which uses relative sizes:

Code:

<style type="text/css"> body{ margin: 0; padding: 0; text-align: center; } #left{ margin: 0; width: 10%; float: left; text-align: left; background-color: #993300; } #content{ margin: 0 auto; width: 80%; text-align: left; background-color:#0099CC; float: left; } #right{ width: 10%; float: right; text-align: left; background-color: #993300; } </style>

html stays the same, as you can see in this example the center column doesn't take up all the space, just as much as needed so if the middle column extends it's still good.

1 Attachment(s)

Hi Jop,

Cheers for the pointers...

So I should use UL instead for menu lists?

Attached is the html and the current css.

My other post on the Anchor, the display block didn't appear to change anything in FF.

{edit} the boxes around are for my guidence, and won't feature in the finished product... {/edit}

Vince

What do you want me to do with the code?

For the link lists:
http://www.alistapart.com/articles/taminglists/

For me, the code shows about the same thing with the links in IE and FF, the clickable area is the same here.

Also 2 more things:

Code:

border: dotted 1px #05f;

IE doesn't support 1px dotted border so makes it dashed, if you like this behaviour and want to display dashed borders in other browser you should use

Code:

border: 1px dashed #05f;

and

Code:

color: aaf;

should be

Code:

color: #aaf;

Cheers