Div+css Layout Example: various 2 column 3 column layout instance (with download)

Source: Internet
Author: User
Tags header window zip
css| Download


Two Column flexible


Browsers:

 "'" (5+)description:probably the easiest page to make. Contains Two layout divs, the main content div is just floated to the left. Very simple! Actions:view | Image Preview | Download[5k] [ZIP]


Two Column flexible with Header



Browsers:
"'"(5+)Description:basically the same template as above but with the addition of a header div for page title, your logo or Banne RS etc. Again very simple to set up. Actions:view | Image Preview | Download[ 3k] [ZIP]



Two column, left Column Static



Browsers: "'"(5+)Description:two columns, the left column are absolutely positioned on the left and is a fixed width. The right content column are sized and positioned by using margins and would resize with the browser window. Actions: View | Image Preview | Download[6k] [ZIP]




Two column, left Column Static, with Header Bar



Browsers: "'"(5+)Description:this is the same template as above but and the addition of a simple header bar which can are used for links, Search box etc.. Actions:view | Image Preview | Download[6k] [ZIP]




Two Column Fixed Width with Header & Footer



Browsers: "'"(5+)Description:a Fixed width centered page with A header, footer, left navigation column and right content column. One of my favourites. Actions:view | Image Preview | Download[6k] [ZIP]



Three Column, left & right Columns Static



Browsers: "'"(5+)Description:this is much the same as 'two Col left Col Static ' but-now-with the addition of a right hand column which-is Absolutely positioned. Actions:view | Image Preview | Download [6k] [ZIP]




Three Column ' Pixel-perfect '



Browsers: "'" (6) Description:sometimes This is called the "Holy Grail". It ' s a three column template which fits together ' pixel perfect '. Actions:view | Image Preview | Download[6k] [ZIP]


Three Column ' Pixel-perfect ' with Header Browsers: ' (6) Description:the same as the "Holy Grail" above but with a header div. Also expands to fit the whole screen. Actions:view | Image Preview | Download[3k ] [ZIP]



Three Column pixel-perfect with Header & Footer Browsers: ' ' (5+) description:my most complete. It has three columns, a header and footer and would resize with the browser window. Actions:view | Image Preview | Download[6k ] [ZIP]


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.