Onkroes

Sorry RahXephon, I didn't mean to misquote you.Thanks for the help but I'm almost more confused than ever. The table thing I can handle and I think that's the safest cross-platform way of doing it.But the browsers seem to interpret percentages differently. So.. footer: I added "clear: both;" and that sorts that out, it sits on it's own beneath everything else taking up the whole page - great.If I put the rightmost two columns in a 'container' div, float the container right, then within that float the 'main' column left and the rightmost column right, then it works great in firefox, but is even more messed up in IE.So frustrating. jlhaslip's page works in IE (actually better than in firefox), so I tried copying elements of that solution into mine, (making sure I know what each element is supposed to do) until it's all but identical, and mine still doesn't work.Essentially (from jlhaslip's code), there are 3 containers:- pagewidth (which is just a blank div container) [contains header, wrapper, footer]- wrapper (which is the body between the header and footers) [contains twocols, leftcol]- twocols (which contains the middle and rightmost columns) [inside wrapper, alongside leftcol, contains maincol, rightcol]It *seems* obvious, it's not rocket science. And I assume it's the clearfix class that 'makes it work' despite the fact that all the other formatting options *should* make it work anyway. But.... even using 'clearfix' unadulterated, my code still won't work.Also, using jlhaslip's code, the height is only as high as the text that fills it (which is obviously not what I'm after). IE seems to ignore the height directive of a sub div (e.g. if I just put height 100% in the leftcol div, firefox makes it whole height, IE doesn't change). But also...I wanted to change the widths, so taking the code that does work and changing piece at a time to make it look more like my original, I get to the point where I want to change the column widths. jlhaslip has:leftcol: 15%, twocol: 85% = 100% (i.e. 100% of the pagewidth div)then maincol: 82%, rightcol: 18% = 100% (i.e. 100% of the twocol div)And that works, 3 columns side by side.When I change leftcol to 20% and twocol to 80% (i.e. still 100% of pagewidth div), we're still working,But when I change maincol to 75% and rightcol to 25% (i.e. still 100% of twocol), IE throws a wobbly and puts rightcol underneath and to the right of maincol (firefox continues unfazed).I'm so close to giving up - all I wanted was to follow the standard and have a sight that works cross-browser.I'm going to tables!

I'm trying to do something very similar, and I have a site where I use absolute positioning and pixel sizes, and it does work, but........ I want something that will work in all browsers and all screen sizes. So I figured I would go for simplicity, use percentage sizes and let the browser decide. Bad move apparently. Started playing as simply as possible....Stick this code (pasted below) into the Tryit editor and see what you get! It looks to me like you *should* get a header, 3 columns underneath it, side by side, and a footer. What you actually get is the right column sitting underneath the other two (but to the right because I told it to float there), but weirder, the footer then slots in to the left of it! (obviously tried it with the styles in a separate css file but stuck it inline for simplicity here). [oh, and it does the same thing in Firefox, and IE, as it does in the TryIt editor.I don't mean to hijack this thread for my own problem, but it strikes me it's essentially the exact same issue and I can't find (either by browsing the forum, following the tutorials, or endless playing with it) a solution, without absolutely positioning it.Floating the RB column right puts it on the right of the footer below the other columns, and floating it to the left (as I saw suggested) simply puts it on the left of the footer below the other columns. The colours are just so the divs are easily picked out. The header and footer are 10% each, leaving (I figure) 80% for the middle bit. Then the left and right columns (LB & RB) are 20% each, leaving (I figure) 60% for the middle column.Also tried putting the three 'column' divs inside a 'container' div width 100%, height 80%, to see if it would order itself properly within a div, but no such luck.Do percentages *really* not work in CSS as RahXephon said?<html><head><style type="text/css">#header{background-color: black;color: white;width: 100%;height: 10%;}#LB{background-color: yellow;color: red;width: 20%;height: 80%;float: left;}#MC{background-color: magenta;color: cyan;width: 60%;height: 80%;float: center;}#RB{background-color: blue;color: yellow;width: 20%;height: 80%;float: right;}#footer{background-color: black;color: white;width: 100%;height: 10%;}</style></head><body><div id="header">This is header text</div><div id="LB">This is text in the left border</div><div id="MC">this is text in the main content area</div><div id="RB">this is text in the right border area</div><div id="footer">this is footer text</div></body></html>