Change this layout by rotating your iPad
When in landscape mode on the Apple iPad this layout has two columns. The main content is in the left column and three smaller sections join to form a right column of content. When the iPad is rotated to a portrait orientation the main content takes the full width of the device and the three smaller sections move down into three columns below. In both the landscape and portrait layouts there is a header at the top and a footer at the bottom.
Both the main content area and the three smaller areas keep exactly the same width in portrait and landscape modes. This means you can be sure each area of content will always look the same even if it has moved to a different position. This is great news if you want to use images within the page, they can take up the full width of their content area and they will always be seen properly.
The div structure
The structural divs in this layout are actually quite simple considering that they are exactly the same for both the two column landscape layout and the single column portrait layout. The whole layout is contained in a wrapping div with three main parts inside; the header, the content, and the footer. The content div contains the main div (for your main content) plus a side div that contains the three side sections.
<div id="wrap"> <div id="header"></div> <div id="content"> <div id="main"></div> <div id="side"> <div id="sidea"></div> <div id="sideb"></div> <div id="sidec"></div> </div> </div> <div id="footer"></div> </div>
Full Cross-Browser Compatible
This layout not only works on the iPad but it will also work on all the most common web browsers. If this page is viewed in a browser that is wider than 1024px then the layout will appear centered on the page.
Standards compliant browsers that are supported are: Firefox, Safari, Opera, Google Chrome, plus also the non-standard Internet Explorer version 6, 7 and 8. The orientation switching will only work on the iPad, Firefox and Google Chrome.
Problems with this layout
Download the demo files (ipad-css-layout.zip - 41kb)
100% Pure CSS
No CSS hacks have been used in this layout. A mixture of floats and relative positioning is all that's required for the structural divs. This method works for all common browsers.
This layout does not require images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design.
The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on link source ordering for more details on how this affects links). To make your website as optimised as possible, your main page content must come before any side columns. This layout does exactly that.
Full length column background colours
In landscape mode the background colours of the two columns will always stretch to the length of the longest column. You can read my article on equal height columns if you want to see how this is done.
Resizable text compatible
This layout is fully compatible with resizable text. Resizable text is important for web accessibility - people who are vision impaired can make the text larger so it's easier for them to read.
Valid XHTML strict markup
The HTML in this layout validates as XHTML 1.0 strict.
Centered menus compatible
This layout is fully compatible with my cross-browser compatible centered menus.