iPad CSS Layout with Landscape/Portrait Modes

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

If you're using an iPad this layout will work perfectly but if you are using a different device that has a screen smaller than 1024x 768 pixels then this page will scroll horizontally. There are ways to fix this, for example using JavaScript to dynamically change the layout to accommodate the current screen size but for this demo I wanted it to work without any JavaScript. A more universal layout that works on all screen resolutions plus the iPad and iPhone will be the subject of a future post. Subscribe to my RSS feed and you will be alerted when I post new articles and demos.