What are the top 5 reasons a web layout breaks?

HTML & CSS
1

Buon giorno from snow has now all gone Wetherby UK,

In my odyssey to getting a better understanding into creating css layouts that “dont break” ive learnt a few usefull concepts that save a lot of pain such as clearing floats, CSS resets & how to avoid parents of floated elements from collapsing.

But i wonder if there are 5 (or 10) classic reasons why a layout (using floats) often breaks? (breaks meaning layout suddenly morphs into into chaos).

Grazie Tanto,
David

2

[font=verdana]Common things that I’ve seen are:

[list][]designs that require the exact same font rendering as on the author’s computer, particularly to get a fixed height
[]designs that assume a viewport of a certain width but without declaring it explicitly
[]designs that are too tightly nailed down to specific dimensions, for a whole host of other reasons
[](often non-standard) code that has only been tested in one (usually buggy) browser.[/list][/font]

3
  1. A common problem I see in horizontal fixed height and width floated menu is where the author uses the text width + padding to make the items fit the exact length of the menu. The problem is that no two browsers will render text at exactly the same length and over the course of several items you can be 20px out and the last menu item often drops to the next line or is hidden.

The secret is to either use display:table-cell (ie8+) instead of floats or not to float the very last item and then to remove the padding thus allowing for the element to soak up the available space more easily (overflow:hidden and haslayout are also needed on the last item along with text-align:center to center the text in the available space).

  1. Not allowing enough breathing room between floated elements or columns. This was crucial in IE6 where width was always treated as a minimum and an element that had a larger child item would stretch the parent and break the layout in old IE. However IE6 is not an issue these days but allowing breathing space between columns (not margins) is still a good idea. e.g Instead of floating two items left with a margin between then them just float one left and one right and no margin is needed. Should you make a mistake in one columns width it won’t break the layout unlike where you have accounted for all the space with margins, padding, width and borders; one pixel out and the layout breaks.

  2. Setting fixed heights on elements that hold fluid content such as text. Any container that holds text content should be allowed to grow as required because you never know what size the text will be displayed at. Use min-height if a base height is needed or use ems for the height if it must be a fixed height.

  3. Only float elements that need to be floated. i.e. Don’t float everything. Use inline-block instead of floats when you have multiple items that need to wrap without snagging.

4

Thanks for replying guys :slight_smile: