You're welcome - glad you found it useful.Quote:
Thanks!
Paul
Printable View
You're welcome - glad you found it useful.Quote:
Thanks!
Paul
Could I ask you why you don't want to use tables?
surely using something like this
is alot more versatile/crossbrowser/better looking/allows greater text ranges/doesn't loose header when increased/expands side menu when text doesn't fit....Code:<style type="text/css">
body {padding:0px;margin:0px}
thead { height:auto;background:yellow;margin:0px }
.ltd { width:100px;background:red; }
.mtd { width:auto;background:green; }
.rtd { width:100px;background:blue; }
tfoot { height:auto; background:purple;color:white }
td { padding:0px;border:0px;margin:0px }
</style>
<body>
<table cellspacing="0">
<thead><td colspan=3><h1>Header</h1></td></thead>
<tr>
<td class="ltd">left content left content left content left content left content left content left content </td>
<td class="mtd">middle content middle content middle content middle content middle content
middle content middle content middle content middle content middle content
middle content middle content middle content middle content middle content</td>
<td class="rtd">right content right content right content right content</td>
</tr>
<tfoot><td colspan=3>footer</td></tfoot>
</table>
</body>
Why use css and cause loads of problems?
Paul, when I look at your script with large text it's quite hard to read......
Anyway, I'm only asking why use css instead? Not dissing 'cause it's good, but why?
I tend to agree with you Mark, and the only benefit I see to doing this type of layout in CSS is that you can reorder the columns in your source code however you want (which is a big plus for SEO). However, sometimes that benefit alone is big enough to necessitate the use of CSS.Quote:
Originally Posted by Markdidj
Gotcha vinnie.... I understand. Wouldn't affect the people that use js includes though :)
Yes certainly ! I hate tables :)Quote:
Could I ask you why you don't want to use tables?
Paul
Perhaps I'd better explain more fully.
The purpose of the thread was to produce the type of table layout using css that was previously thought to be impossible. (Your table layout doesn't actually do the same job as mine as a lot of my code was in producing the 100% footer - the layout would be much simpler without it and all the elements could be more fluid and allow for all the things you mentioned.)
I could easily have made a table layout with another table layout but where would be the point in that ;).
I agree that some layouts are simpler with tables and may be more cross/browser friendly but your version doesn't display correctly in Opera6 (neither does mine :)). (Although its probably easy to fix.) So the truth isn't always obvious as most people don't check their table layouts and I've seen many table layouts that are incorrect.
Where css layouts do score is in accessibility and as the w3c say "tables should only be used for tabular data" not for layouts. That's good enough for me! but I don't expect everyone else to agree. Do what you like see if I care :) It's not a hospital - it's not as though anyone is going to die (I can't remeber who said that first.)
While I've got nothing against tables the sole purpose of this thread was to show that the 3 column equalising layout could be produced in CSS. The code has also proved to be quite robust and works in over 90% of browers.
If tables work for you then use them. I personally won't use tables (unless for tabular data ) and usually resort to designs that work best with css.
I could quote a number of designs that tables can't produce but that css can do easily but I don't see the point. Use whatever medium you want and are happy with and does the job best for you.
I'll stick with CSS :)
Paul
Edit:
PS: And as if to defeat my own argument take a look at this thread where I have said that tables would be more suitable:
http://www.sitepoint.com/forums/showthread.php?t=148031
I hate it when someone tries to make a point, but doesn't think that one more step ahead.... ( added: or presumes I can't )Quote:
producing the 100% footer
(not for NS4)Code:table {height:100%}
But I probably do they same at times.....
source:http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layoutQuote:
Originally Posted by w3c
A good read......
I think for this instance it is better, apart from the reasons vinnie gave.....
IMHO, for this instance tables are good......
Doesn't do it for me :)Quote:
table {height:100%}
What's your point? I was explaining that my example was more complicated because of accounting for the 100% footer and that you hadn't included it in your example. I wasn't trying to be clever.Quote:
I hate it when someone tries to make a point, but doesn't think that one more step ahead.... ( added: or presumes I can't )
& from your own post:
How can a 3 column layout ever make sense when linearised? The left or right columns are usually used for navigation and the centre column is used for content. Therefore the content in cell one should lead to the content in cell 2 and then to the content in cell 3. But it won't because it isn't data.Quote:
Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent
Anyway you're still missing the point!!!
This was an example of how this type of layout could be achieved with CSS. I've already acknowledged that this type of layout is easier with tables and don't want to argue the semantics of tables versus css (although you obviously do :).
I agree some layouts are simpler with tables as I've already said above so there's no argument there:)
Let me say once again "Use tables if you want and if its easier". Just don't expect me to agree to use them when there are other means available. If there are no other means available then I will use a table.
We'll just have to agree to differ as I'm tired and I don't really want to argue anymore :)
Paul
Goodnight then Paul.
for others:- I have tried
on IE6, NS7.1, MF, and Opera7, it works the same in all (places footer at bottom of page). IMO it works better than Pauls, less difficult to implement, and when viewed in MF still looks good when text is increased.Code:table { height:100% }
So now you know of alternatives, it's up to you to decide. I know which I would go for. ( the easier & better layout ). But then I'm not a SEO (who might go for Pauls).
You did a good job though Paul, must of taken you ages.
added: SP competitors Exp-Exc have their layout in tables, works for them ok. And in my opinion has one of the best layed out sites there is. They also use the js includes method. I suppose that is why they can accomodate a large text size.
IMO, the table is linearized, taken as a whole picture, the table's about your site....... one column leads to the next.....
more info on tables for full page layout here: http://www.sitepoint.com/forums/showthread.php?t=148172 as this is about full page css layout
Paul's layout used in a real-world, client situation:
http://www.livewellbefree.net/idiuser
The design isn't all that impressive, as it's a templated website builder system that allows the site owner to control most of the design. But at least it all works well.
Thanks, Paul. Credit is given in the primary CSS file.
Can anyone tell me how this behaves in NS4.7? The browser won't run on my machine here and I need to develop a tableless 3 col site which will degrade gracefully in NS4.7.
Glad you found it useful and nice to see a layout with it :)Quote:
Thanks, Paul. Credit is given in the primary CSS file.
I haven't made any concessions to netscape 4 so I would think it would blow apart. (I haven't got a copy of 4.7 either so I can't offer a fix.)Quote:
Originally Posted by daz
Here are some links to 3 column layouts that are supposed to work on NN4:
http://www.fu2k.org/alex/css/index.mhtml
http://www.realworldstyle.com/
You may be better off with these designs because they are specifically targeted at the nn4.7 browsers.
Hope that helps.
Paul
Your layout actually works reasonably well Paul. All the columns rendered, just a bit of overlapping with the header which could be fixed.
Thanks for that Daz. If I get time I might download NN4.7 just so I know what it looks like :)Quote:
Your layout actually works reasonably well Paul. All the columns rendered, just a bit of overlapping with the header which could be fixed.
Paul
Hi,
Just added a three column all fluid layout to this (if anyone's still interested) thanks to a request from Chris:)
http://www.pmob.co.uk/temp/3colfluidtest_4.htm
Theres a simpler example here that doesn't use the 100% height and is much easier to use:
http://www.pmob.co.uk/temp/3columnfluid_simple_1.htm
Feel free to use and abuse the code.
Paul
If this problem could be sorted I would use it. The only reason I have stuck with tables is because of this.Quote:
Originally Posted by Daz
How's it going Paul, any luck on the header?
Hi Markdidj,Quote:
How's it going Paul, any luck on the header?
I haven't got around to downloading NN4.7 yet but I'll try this weekend and see if theres anything that can be done.
I've made a simpler version of the fluid 3 column layout which I have linked to in my above post. This doesn't use the 100% height (footer at bottom of window technique) and is easier to use.
I was thinking that if I did the same for my original design (2 columns fixed, middle fluid) then it would be more compatible across browsers and easier to use. I'll have a playaround this weekend :)
Paul
Need to call Center column first if possible.
Hi Paul,
I'm trying to use css to achieve a 3 col layout because I run ads in the left and right columns. Unfortunately the ads take much longer to load than any content I have in the center.
What I'd like to do is to call the left and right columns AFTER the center column. I remember after scanning this thread that you mentioned that the floats needed to be called first, and am wondering if there's a good clean way around that so I can load my center content first without having to wait for the left and right channels to load. (try doing _that_ in tables) :)
Thanks for any help you can provide in your 'copious' spare time. :)
Here's an example (please excuse the mess as I'm still tinkering):
http://www.onesixthwarriors.com/inde...ayout02a.shtml
Hi,
The only way to get the centre content first is to lose the footer and then absolutely place the left and right columns at the end of the html.
I'll have a think on it but I think I've tried this before.
Paul
Is there a way with the 3-column CSS layout to make the center column, say, 600 pixels wide, then have the left and right columns immediately adjacent to the center column, and have the whole thing centered in the page?
The table equivalent:
HTML Code:<table align="center">
<tr>
<td width=120>left</td>
<td width=600>center</td>
<td width=120>right</td>
</tr>
</table>
Hi,
Do you mean something like this:
http://www.pmob.co.uk/temp/3colfixedtest_centred.htm
(Haven't tested fully yet but looks ok in ie5 - 6, Mozilla/firebird and OPera7).
Paul
Yes, something like that :). Can the center column auto-expand if its content happens to be bigger than the minimum width?
FYI, in Firebird 0.7 the center column overlaps the left column, and doesn't extend all the way to the bottom (see attached PNG).
Hmm, that might be pushing the envelope a bit too farQuote:
Can the center column auto-expand if its content happens to be bigger than the minimum width?
Thanks dor the pic, it obviously needs more work but I won't be able to get to it for a couple of days now. The 100% height does seem to be a problem for mozilla/firebird in this layout. It only seems to like the 100% on the body and not the extra container that was put in to centralise the layout.Quote:
FYI, in Firebird 0.7 the center column overlaps the left column, and doesn't extend all the way to the bottom (see attached PNG).
I will get back to it but I'm away for 2 days now (sorry).
Paul
Sure thing :).
My two cents on the CSS vs. tables - the primary reason I use CSS is to make my pages more responsive (load faster). I use remote images, scripts, etc. If they're in a table, the entire thing won't render until everything is loaded. Sometimes a remote server goes down, or is really slow, causing the entire page to be blank (at least in IE anyway), or stall partially loaded (Firebird).
CSS also reduces page sizes a fair amount (not a big deal for me, but the smaller amount of markup does make editing them easier).