Choosing a way to convert from tables to CSS (float or absolute, etc...)

I have been reading a lot about tableless desing and I decided to convert my web site into fixed width, 3 column desing.

I did 3 different types of CSS to do this (based on tutorials and templates), but I have no idea on wich will be better for my web site.

Please take a look at the source codes (small files, CSS included in the html files, should be really quick to look at) and help me choosing.

important: the 1px border in the main containers are just for "debugging pusposes", it won't be used on the web site.

http://www.djbrunofacca.com.br/sample1.html - this uses absolute positioning.

http://www.djbrunofacca.com.br/sample2.html - this uses float but there's an additional container (inside the main container) just for the left and middle columns. any advantages in this?

http://www.djbrunofacca.com.br/sample3.html - this uses float: left for all 3 columns and I think it's the simplest of them all.

I'm concerned about cross browser compatibility and degradation in different resolutions.

Thanks
Bruno Facca

Ex1: Look at this in Moz or Firefox to see correct behavior. A bug in IE (what else is new) makes it look better than it is. The hidden text is there, just as you coded it. The AP boxes are not in the flow, and overlay it. IE improperly stretches the AP boxes rather than allowing overflow.

Ex2: More complex than needed for this demo.

Ex:3 "<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->" IE6 handles floats/parent boxes wrongly. The clearing is needed if in-the-flow content does not run long enough.

Always use Moz/FF/Camino as your test bed. IE is too buggy and will give you improper results. Use IE only when you're ready to apply work-arounds or dumb things down for IE's stupidity.

There is no "best" method. There is only a more appropriate method. Looking at your examples gives me the impression that you're overthinking this without the benefit of fully grokking the concepts. The key to understanding is that elements are either in the flow or not.

Static and relative elements are in the flow. Fixed, absolute, and float elements are not in the flow. Flow elements are in and of their parents. Non-flow elements over- or under-lay (but don't think "layers") their parents and are placed by reference according to a set of rules.

Survey some more css layout tutorials and bookmark Big John and Holly Bergevin's site, /*Position Is Everything*/, as a basic reference. It's not all that hard (well, excepting IE's sorry behavior) once you understand the underlying concepts.

cheers,

gary

I am using firefor to test it, I only use IE at the end to make sure it also looks good on IE. I was using firefox 0.8, now I just upgraded to 0.9.2 and I still get the same result. The main container doesn't expand and the hidden text doesn't show in the example 1.

Here's what it looks like to me using firefox:
http://www.djbrunofacca.com.br/wrong.gif

Thanks for the advice, I'll try to understand better the flow thing. I already read that article (and pretty much all other you can find on google) but I'll read it again.

Thanks

Since you didn't mention the overflow, I just assumed IE. As I said, it renders what you coded. There is nothing to expand the box. AP elements are not in the flow. The hidden text is there, it's just covered up. Set the AP element backgrounds to transparent, you'll see it.

Understanding flow is critical. Read all the articles in /*PIE*/.

cheers,

gary

thanks gary, that was really important. I read all the articles in PIE today and now my CSS is a lot better. I finally understand the flow thing. I also understand that you can only clear floats, that's why the absolute positioning desing wasn't working as I expected.

Below is a test of the 3 column layout I did:
I know my code is kind of messy and my HTML won't validate but I will be working on that as I convert my site to tableless.
Here's the test page:
http://www.djbrunofacca.com.br/index5.php
Here's the CSS
http://www.djbrunofacca.com.br/styles.css

Can you find anything wrong in the CSS (specially the 3 columns stuff)?

I'd like to have your suggestions for this:
I haven't figured out what to do with the blue bar that says "this is still a table", that is the title for each column. My best idea so far is doing another div (with the blue bg and stuff) inside each of the 3 columns for the titles. I was thinking of a common header before (a single column on top, also inside the main container) but I would have trouble aligning the titles on top of their respective columns. Any ideas are appreciated.

EDIT: the test page was tested in Mozilla 0.9, IE 6 and IE 5.5. BTW, I found a way of running multiple versions of IE in your windows, you should probably all know this by know but if you don't, take a look at: http://www.insert-title.com/web_des...es/dev/multi_IE

Thanks
Bruno

Looking pretty good, Bruno. Let me make some coding suggestions. These are my basic practises. They may or may not appeal to you.

• Write pure, semantic, well structured html, without regard to how it should display. Don't even think about styles until your html is right and valid.
• Use as strict a doctype as possible for new pages. Right now that would be xhtml 1.0 strict. Legacy stuff you're maintaining can be whatever ir has to be.
• Give your logical groups descriptive (of content), unique ids. Use names like #navcol or #main rather than #leftcol or #middlecol. You might have banner, navcol, main, and footer for example.
• Now open a second panel in your editor with your css file, and write your basic positioning rules.
• When the overall positioning is good, start subgrouping (preferably with re-usable classes) and writing appearance rules.

Once you have the basic stuff done, the little things will be a matter of tweak and test.

Now, on your recent trial:

Those tables with the 'titles' class should belong to their relevant columns. Don't use a class with naked text. In this case, use h2s.

The h1 in the banner is good, but overdone. Just wrap the logo image in the h1 and give the image a meaningful alt text eg., 'DJ Bruno Facca'.

Make all tags and attributes lower case. Even if you don't use xhtml doctypes now, future compatability is enhanced.

Your swap images on the links are really sweet.

cheers,

gary