When nesting a right floated box inside a left floated element. A right floating element will expand the containing left floating element to the width of the parent of the left floated element in IE6. According to W3C the left floating element should base its width on the width of the containing children.
In FF and SF (W3C) the total width will be the width of the containing children. A right floating element does not expand the left floating element to the width of the containing box of the left floated element.

FF

SF

IE

For testing purposes this example uses also attribute selectors.
IE6 ignores the attribute selector while Safari up till 4.0.3 ignores the :not() pseudo attribute syntax.
FF recognize both the [ attr ] and :not([attr]) syntax.
See
testattribute

For the developers who like to use the extra CSS draft 3 possibilities and don’t want to wait until internet explorer supports this. You can use the multi column properties :column-width, :column-gap and :column-rule. Coloring the selected text is an other example in draft3 css property
Example:

<style type="text/css">
div {
	column-width: 18em;
	column-gap: 2em;   /* shown in yellow */
	column-rule: 4px solid green;
	padding: 5px;      /* shown in blue */
	-moz-column-count:2;
	-moz-column-width:18em;
	-moz-column-gap:2em;
	-moz-column-rule: 4px solid green;
	-webkit-column-count:2;
	-webkit-column-width:18em;
	-webkit-column-gap:2em;
	-webkit-column-rule: 4px solid green;
}

/* draw any selected text yellow on red background */

::selection {color: gold; background: red;}
::-moz-selection {color: gold; background: red;}
::-webkit-selection { color: gold; background: red;}

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white; background: black;}
p::selection { color: white; background: black;}
p::-webkit-selection { color: white; background: black; }
</style>

Example: Multi column draft3

See for documentation:

http://www.w3.org/TR/css3-multicol/

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Sometimes you want to know what the default values are for properties of the styling of elements inside your browser: I don’t know yet were to find the default stylesheet for IE but for Firefox you can look in:

C:\Program Files\Mozilla Firefox\res or type resource://gre/res/ in your address bar. There you find the following stylesheets:

1. EditorOverride.css
2. forms.css
3. html.css
4. mathml.css
5. quirk.css
6. svg.css
7. ua.css
8. viewsource.css

For the setting of the current Safari you can look at: http://trac.webkit.org/browser/trunk/WebCore/css/html.css

Look for explanation of this stylesheet on:

http://developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

For Opera you can look in the templates folder inside the package(on mac) or in the folder(on windows)

I have found an error in ie6 where the margin (left/right) gets calculated wrong when you put the table inside an other table and use a quirksmode doctype.

See doctypeerror ( add with developer toolbar a margin-left of 0.5% on one of the elements)

See doctypenoerror where you don’t get the error.

When using a quirksmode doctype ( none or half) the content gets a really absurd width when you apply a margin-width in percentage on an element inside a tablecell where the table itself is inside an other table. Here is the example and some screencaptures what I mean. 

Adding a margin-right  on a span inside a not nested table is correctly calculated

Adding a margin on a span inside a nested table is correctly wrong and gets an absurd width (57276px).

For now I know three ways of clearing the floats:

1. using extra markup after floating element with div element and style=”clear:both”
2. using the :after syntax of a container with floating objects where you create a hidden content and clear the float using the syntax:

   .clearfix:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }

3. using the overflow:auto on the container with a property that triggers “haslayout” mostly width:100% what is basically what you want when clearing both.

The last one is supposed to be used as the best option according to quirksmode: http://www.quirksmode.org/css/clearing.html.
I think that using the  three options can all have there benefits.. In development a container for floating elements is not always possible and then you have to resort to the clearer div. The overflow:auto is not always possible when un-wrappable content is inside the container and you get the scrollbars. So my opinion: use version 3 where possible and it is logical to combine the inner divs for grouping the elements. For creating a layout the clearer div can sometimes be of better help. The second one is depending on the IE bug where content will grow the box even if the box does have a smaller height and you need the extra zoom:1 or height:1px inside a conditional commented stylesheet.
So better use the third one whenever possible. see clearingfloats

In IE the calculations get really stuck if you have different paddings on the tablecells. In SF and FF if one cell of a row or column (depending of left/right or bottom/top padding) has a padding than every cell in that row or column gets the same top/bottom padding.. In IE that is not the case depending of the rounded calculation a cell can have a padding and the other cell does not. Sometime two cells in the same column can have different widths so you get a broken column line when using borders on cells.

Also because IE and SF rounds the results (45.5 will result in 45 instead of 46 ) there can be a difference in total pixels when rounding the result.

Browsers are inconsistent in the way they round sizes in percent-based layouts. Safari and Opera round down, Internet Explorer rounds up and Firefox rounds one column up and one down filling the container completely. These rounding issues can cause inconsistencies in some layouts. You can use a 1px negative margin to fix IE.

When using two complementary widths in percentages than the result can be more or less than 100%. But the rounding will be different for all calculations so if you have a width of 74.5% of an element or have a width of 74% and a 0.5% margin-left than you get twice the rounded result and the total can have a bigger total width. Like in this table width comparison example .

I have also seen in IE6 that using a percentage of 0.5% margin results in a huge sized margin.. don’t know yet why.. by removing the 0.5 margin the span got its right size back again.

IE6resizing

Here is a checklist I use for optimizing a website:

Optimization checklist:

• optimize markup
  • use external stylesheets
  • use external javascript
  • specify doctype strict (renders quicker)
  • minimize http requests (example: create image sprites (group images for hover effects together inside one image))
  • consolidate markup
  • structural markup
  • avoid tables for presentation
  • remove excess whitespace (space, tabs, returns)
  • minimize comments ( no “———”)
  • avoid redundant elements and attributes
    • <div class=”a”><ul class=”b”><li class=”c”><span class=”d”><span class=”e”><a class=”f”>
  • include height and width and alt text when using images
  • minimize url
    • use relative for internal use where possible
    • streamline links.. remove directory default filename
    • remove www when possible
  • ensure template markup is semantic, structural, and valid
• optimize CSS
  • minimize css comments
  • use separate stylesheet for maintenance and different media
  • remove redundant whitespace
  • group selectors with same declaration
  • use shorthand notation
    • shorthand selectors
      • font: weight style variant size/line-height family
      • background: color image repeat attachment position
      • margin | padding | border-style/width/color: top right bottom left
      • border | border-top/right/bottom/left: width style color
      • list-style:type position image
    • shorthand color values (#FF0 instead of yellow or #FFFF00)
  • shorten id and classNames
  • use highest level parent where possible using inheritance
  • assign multiple css classes to a single element example <span>
  • validate css
• optimize javascript
  • use JS to enhance rather than to create user experience
    • use css’s hover possibility where possible
  • separate files to javascript objects or libraries
  • use defer for IE where no markup is produced by javascript to load after the content
  • encapsulate code into functions
    • window.onload = init() or preferred use event handlers
  • load externals conditionally where possible
  • rework code to make it simpler
  • group functions in objects – prevent creating unnecessary variables
  • prevent recalculations
• optimize server
  • include trailing slashes on the urls
  • use html compression (gzip)
  • optimize images, multimedia, alternative format files
  • for larger images provide thumbnail versions
  • use html for caption inside pictures
  • remove obsolete files like images