Compatibility issues with tabeless layout

[innovativeatul]

Can any one suggest some trick and tutorials to make table less layout compatible with all browsers. Say if we are making a 3 column layout how we can set the compatibility in IE AND Firefox

[cmills83]

set your body padding/margins to 0, have a container div with a width then 3 divs inside with widths and float:left; is probably the easiest way. Just have ff, ie6 and ie7 open as you build the site and test along the way.
div { margin:0; padding:0; }
#container { width:850px; }
#div1 { width:200px; float:left; }
#div2 { width:400px; float:left; }
#div3 { width:250px; float:left; }

then html

<div id="container">
<div id="div1">col 1</div>
<div id="div2">col 2</div>
<div id="div3">col 3</div>
</div>

As you build the site post or google any specific problems you run into

[joshua.tilson]

There are also numerous sites out there on "CSS Hacks" that will give you tips and tricks on getting your layout workign just right between browsers.

One the is popular is the <!--[if IE]> trick for style sheets
check it out here

Good luck!

[vishwebdesign]

Can any one suggest some trick and tutorials to make table less layout compatible with all browsers. Say if we are making a 3 column layout how we can set the compatibility in IE AND Firefox

Cross-browser compatibility is simple hard-work. Don't get involve too much in hacks, else you'll only complicate your css. Sometimes you just need to over-ride your styles and the work is done. If you've ever did table-less designs, you must be able to learn from your own mistakes and perfectionate your work.

[MidiMagic]

Trick: For cross-browser-compatibility,You can't have defined widths in the same div that has margins, borders, and/or padding. Nest them in the order you want.