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

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]