Problems with a 3-column CSS-based layout

.. the one with all the "standard boxes", i.e. with Header, Content and Footer. Note that this thread is basically a continuation of these two threads: A beginner's question on CSS (long links and huge text jut out of the boxes), Last few problems with making my home-site completely CSS-based, please HELP that I've opened in the "Programmer's Symposium" section of Ars Technica forums back then.


1. I've found yet another template that seems to be much better (and W3C validated), compare to the one from my original post in the thread linked in the paragraph above. FWI, I got it from this particular page: http://www.ssi-developer.net/main/templates/3col.shtml, the one at the very bottom called "Three Column Pixel-Perfect with Header & Footer". But as usual, there are few problems (and just few), that I just can't resolve by trying-out various combinations of values etc. Here are the direct links to all the original-template's related files (not modified yet): http://users.volja.net/tayiper/3c-hd-ft-flex.htm, http://users.volja.net/tayiper/3c-hd-ft-flex-layout.css, http://users.volja.net/tayiper/3c-hd-ft-flex-presentation.css

If you look at the original template (as download from that site linked above), you will see that there is no gray-colored border/frame around the document. But when I "merged" it with my site's content, it suddenly appeared with no obvious reason (at least for me), and I just can't get rid of it. Also, I doubt that it is something in my code that is causing it, so yeah - this is a real mistery for me. But anyway, it looks like kind of cool, so this is not problem, but I suspect that it's causing another problem. See for yourself and compare the original: http://users.volja.net/tayiper/3c-hd-ft-flex.htm against the file modified by me: http://users.volja.net/tayiper/index-example-1.html


2. The real problem is with the right column (and only the right one), well I did manage to nicely "sort" the left column with changing the value in "layout.css" file (under the #lh-col{ part) from left:0; to anything else, for instance left:1; or even left:20;, it actually doesn't matter. But the problem is that IIRC, I succeded to do the same with the right column, but it was only once sometime during the process of "merging" it with my site's content. But from some reason, I just couldn't do and can't the same with the right column (anymore), as I did with the left one - if I change the value as described above, the right column just disappears. Oh and yes, once during the process of "merging", the right column "jumped" on the left side (instead of disappearing), when I changed the values in a mentioned fashion. In all the below examples, the style .css file were not modified.

a.) Links to files modified by me: the left column juts out:
http://users.volja.net/tayiper/index-example-1.html (style-file: http://users.volja.net/tayiper/layout-example-1.css)

b.) Links to files modified by me: the left column is placed correctly:
http://users.volja.net/tayiper/index-example-2.html (style-file: http://users.volja.net/tayiper/layout-example-2.css)

c.) Links to files modified by me: the left one still placed correctly, but the right one disappears: http://users.volja.net/tayiper/index-example-3.html (style-file: http://users.volja.net/tayiper/layout-example-3.css)


And another thing: I think that I also discovered one a bit annoying thing. It seems to me that Firefox and IE read the code a bit differently. I mean where the margins of left/right column are placed correctly in Firefox, there are 2 mm above (or below) the "line" when viewing the page in that state with IE. And reverse, if I modify the "layout.css" file so that columns look OK in IE, there are 2 mm above (or below) the "border line" when viewing the page with Firefox. am curious, is this a "generic" problem or what ??


P.S. -- But lately, I started thinking that I might actually not change my site to 3-column layout ("purely" CSS-based), since I am more or less content with my current site's design; yeah, in fact the entire site's design is my idea; although I am of course not saying that it's something special ...


tayiper

 

You were of to a bad start with the template it has an XHTML doctype but yet the tags are in caps which is not allowed in XHTML.

It has a transitional doctype which should not be used for newly designed sites.

Considering your making a site using CSS you have lots of styles in with your HTML/XHTML.

I would start again with a better tamplate and do it bit at a time when you dont understands somthing then just ask because there are so many things that are wrong with the one you have now done I just dont even know where to start to help you.

The only way I could help is to redo the lot for ya which means your not learning anyways.

Here is good tutorial on how to do the Holy Grail layout you have used.

Then I would also advise going though the CSS tutorials on W3Schools

Some more exellent CSS tutorials

Max Designs

A List Apart CSS layout pacticle tips

A List Apart CSS

 

Have a look at this 3 columns template. It's far easier than most others and works is the recent browsers.

 

Wow, thanks man, I totally love the simplicity of this particular template ...


tayiper