Test_suite/layout

This test includes:

Wolf photo used in the horizontal centering test by DigitalArt2 on Flickr, under a Creative Commons license

Browser Version OS Passes colsGrid test? Passes %cols test? Passes horizontal centering test? Passes vertical centering test? Notes
Firefox 2 OSX Yes Yes No Untested Doesn't pass horizontal centering test! Fix: give the element inside wrapper divs a width (which defeats the purpose); Fix2: floating the main element in centerHorizontallyInner to the left
Firefox 2 Windows Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Assumed: Doesn't pass horizontal centering test!
Firefox 3 OSX Yes Yes Yes Yes Perfect
Firefox 3 Windows Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) /
Firefox 3.5 OSX Yes Yes Yes Yes Perfect
Firefox 3.5 Windows Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) Untested (assumed same layout rendering as on OSX) /
Opera 9.64 OSX Yes Untested Untested Untested Rounds subpixels down on 1d3 columns
Opera 9.64 Windows Untested (assumed same layout rendering as on OSX) Untested Untested Untested /
Opera 10 (beta) OSX Yes Untested Untested Untested Rounds subpixels down on 1d3 columns (same as 9.64)
Opera 10 (beta) Win Untested (assumed same layout rendering as on OSX) Untested Untested Untested /
Safari 3 OSX Untested Untested Untested Untested /
Safari 3 Windows Untested Untested Untested Untested /
Safari 4 OSX Yes Untested Untested Untested Rounds subpixels down on 1d3 columns, not perfect, but better than opera
Safari 4 Windows Untested Untested Untested Untested /
Google Chrome 2 Windows Yes Yes Yes Untested Rounds subpixels down on 1d3 columns, not perfect, but better than opera (Same as Safari 3 and 4)
Internet Explorer 6 Windows Yes Yes No Untested Doesn't pass horizontal centering test! Fix: give the element inside wrapper divs a width (which defeats the purpose);
Internet Explorer 7 Windows Untested Untested Untested Untested /
Internet Explorer 8 Windows Untested Untested Untested Untested /
Internet Explorer 7 (8 in compatibility mode) Windows Untested Untested Untested Untested /


Grid columns

As of now the standard grid is defined at 936px with 12px margins on the left and right hand sides

This div is 936px wide

1 column x 10:

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

2 columns x 5:

Column
Column
Column
Column
Column

(3 columns x 3) + (1 column x 1)

Column
Column
Column
Column

(4 columns x 2) + (2 columns x 1)

Column
Column
Column

(5 columns x 2)

Column
Column

(6 columns x 1) + (2 columns x 2)

Column
Column
Column

(7 columns x 1) + (2 columns x 1) + (1 column x 1)

Column
Column
Column

(8 columns x 1) + (1 column x 1)

Column
Column
Column

(9 columns x 1) + (1 column x 1)

Column
Column

(10 columns x 1)

Column


Percentage columns

This div is 400px wide
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column


Percentage columns with spacing (left)

This div is 400px wide
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column


Percentage columns with spacing (right)

This div is 400px wide
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column


Percentage columns with spacing (both_half)

This div is 400px wide
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column


Percentage columns

This div is 200px wide
A
A
A
A
A
A
A
A
A
A
A
A
A
A


Percentage columns with spacing (left)

This div is 200px wide
A
A
A
A
A
A
A
A
A
A
A
A
A
A


Percentage columns with spacing (right)

This div is 200px wide
A
A
A
A
A
A
A
A
A
A
A
A
A
A


Percentage columns with spacing (both_half)

This div is 200px wide
A
A
A
A
A
A
A
A
A
A
A
A
A
A


Center horizontally (paragraph)

Center anything horizontally...!

Center horizontally (image)

Wolf

Center horizontally (image wrapped in div with text align center)

Wolf

Center horizontally (lorem ipsum paragraph with defined width)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Center horizontally (colsGrid)

Column
Column
Column


Center horizontally (percentage columns)

This div is 200px wide
A
A