bookmarks

 

I-Page, CSS Liquid Header & Footer

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. 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.

 

Valid XHTML 1.0 Transitional    Valid CSS!

 

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.

Your liquid footer goes here

Help Feed the Kitty

Your support helps us continue these efforts.

Credit Cards Accepted

 

© 1995-2014 | Alt-Web Design & Publishing | California

Web : Graphics : Print : Media Specialists

Home | Links | Tools | Templates | Contact