Main Menu

Snippets

Web Design Trick

Modern HTML Standards states that DIVs should be used for layout, not tables. But DIVs don't always behave properly in different browsers.

Ever tried to place two DIVs side-by-side? Once you get it working fine in Firefox and Opera, you then can discover it all goes wrong in IE. So is there a solution?...

There is a trick you can try, which is often used by professional web designers.

Instead of fumbling with two parallel DIVs, create a borderless TABLE with one row containing two cells. Assign to the cells the widths you would have created for the DIVs.

Now place the two DIVs within those two table cells with their width set to 100%. This should help to keep everything in place... and you are still using DIVs.

Remember that the Web Standards is a set of guidelines, not rules. Notice it says you SHOULD use divs, not MUST. A more workable rule would be to use what works.

Another tip to remember is that a long string of characters without spaces can cause problems if it is wider than its container (div or table cell) and will cause the container to expand to fit the text. You most often see this when a long web link has been inserted, such as in forums. If there are no spaces, the text cannot wrap-around, so there is only one solution... avoid long web links.