Hi there,

This is my first all css no table page.
I need to pick some brains about a 3 column css no tables layout.
I looked at lots of tutorials and I still can't find the answers to stuff I want to know.
The best tutorial I found was called listamatic by Maxdesign.com.au
All the tuorials I found can do 2 and 3 column lay out this is not hte problem.
The problems start when you try to put content into the colums and the worst offender in all cases is the header, if you try to do anything except put a plain background image inside, the layout goes bananas.

I have had lots of trouble getting this to work in just three browsers
IE6
OPERA6
MOZILLA1.6

they are the only ones I have installed at the moment.

Two problems with the header.
1. when the window shrinks to less than 680 the floats inside the header stack up, I have already made the middle float smaller to try and stop this.
Is their another cure.

2. I gave the header a width of 100% to make the backgound color appear, if I did't give it a width the color disappears I still don't know why this is happening, is this the only way to fix this.

A problem with the page container, the header body and footer are inside an empty div, when I try to give the page container a border 1px the bottom border disappears under the footer in Mozilla and the only way I could get it to work was to give the footer a bottom border.
If you know why this is happening let me know cause it is driving me potty.

The page looks ok in all three browsers.

If you have a different browser please let me know if the 3 columns breaks.
I don't care if it looks different just as long as the page looks ok and readable.

After you look please post your browser and operating system and any cures you know.

http://www.whatcrap.com

BTW the page validates in css and html 4.01 trans

Thanks Junk Ked

__________________
Junk Ked
www.domain-names-registrar.com

You can use min-width for opera, firefox, netscape
javascript for IE to solve this problem. (I use min-width of 700px for most of mine)

google for list apart and there is plenty of help on there for css etc

Hi misunderstood

do you mean the microsoft expression hack.
I took a look at it but I haven't tried it yet.

the current pages are pretty much ok now that I have the latest version of the template up.

I have been reading more about the min width problem and found one guy that was using the old fashioned transparent pixel ( you can use this for the height problem too) and others that use the invisible hr tag.

If I am going to use a hack I would prefer one that is easy to understand and adjust to my own needs.

So for now I will use the hr tag, all you have to do is color it the same as your background , give it 0 height , display hidden, and remove all spacing like margins.

I also found another solution to the header problem which was to use z-index to slide the right handside column under the content.
I will try it out as well but it has cross browser problems.

I had another page called fairystory that had a giant gif 600px wide that I want for a joke , without min-width it will pop down under the page. So I can't put it up yet. I might put it on its own like the alien invasion gif.

I found another bug with opera6 but I was told to ingnore it by people a css-discuss.

All these bugs, I need a bug zapper for my pc!!

__________________
Junk Ked
www.domain-names-registrar.com

Hi JUNK KED
what is really annoying is as soon as you solve one css problem with a browser another pops up in a different browser!
The javascript hack is really simple to use (doesnt work in some mac), just one line of code to change if I remember rightly.
I use float for my left and right column (accessibility reasons so in text only version content shows first) but have the problem if no content then the float columns overlap the footer. I use min-height for the content to get round this and it seems ok (famous last words).
If you ever come across a perfect cross browser 2/3 column css template then let me know

Guess what,

the pixel hack and the hr hack will not work for my design, this means the java hack probably wont work either.

IE will pull all float:rights to the left even when you tell it to give a minimum width to the parent container.

I gave up trying to get the fairystory to work in the 3 column layout and put it on its own page. This is also the page that gave me the OPERA6 bug the bug does not happen in the new layout.


In reply to your last post the problem is even though there are a lot of good 3 and 2 column layouts, what the authors don't tell you is how to ADD your own stuff to the page ( images, divs, floats etc...) and not BREAK the layout.
Most sites have more than just one H1 tag in the header, nearly every tutorial I have read uses the H1 tag and a background image, this is not what most people want for a header.

I would like to see a really good tutorial on creating headers and footers that don't break when you add a full stop "."

__________________
Junk Ked
www.domain-names-registrar.com