Description:
This relatively simple CSS layout resembles an upper case letter I, hence the name I-Page. The header and footer are each 100% screen width or liquid, while the rest of the page content is centered. In this case, the #contentWrapper is 43ems wide and the body has a min-width of 72ems to keep the page from collapsing too much. The left #sidebar is position:fixed, left: 3ems, top: 7 ems and 9.34 ems wide. Using ems, we can increase text size in browser and everything resizes in scale. Feel free to experiment with your own backgrounds, images and container widths.
View source or page source in your browser to see the HTML and CSS code.
This layout tested and works in IE7, 8, Firefox, Opera, Safari and Chrome.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus et augue ullamcorper fringilla. Suspendisse orci turpis, malesuada ut ullamcorper pellentesque, faucibus egestas sem. Phasellus dictum quam a sapien bibendum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum at volutpat risus! Integer nec luctus velit. Proin venenatis suscipit enim, vel fringilla nibh mollis in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus et augue ullamcorper fringilla. Suspendisse orci turpis, malesuada ut ullamcorper pellentesque, faucibus egestas sem. Phasellus dictum quam a sapien bibendum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum at volutpat risus! Integer nec luctus velit. Proin venenatis suscipit enim, vel fringilla nibh mollis in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus et augue ullamcorper fringilla. Suspendisse orci turpis, malesuada ut ullamcorper pellentesque, faucibus egestas sem. Phasellus dictum quam a sapien bibendum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum at volutpat risus! Integer nec luctus velit. Proin venenatis suscipit enim, vel fringilla nibh mollis in.
