HTML5 Code for 1, 2 and 3 Column CSS Layouts

HTML5 Code for 1, 2 and 3 Column CSS Layouts

Strategize your plan for the layout

Below is the HTML5 and CSS “starter” code for each of the major column layouts. Normally your design will fall into one of these 3 main structures: 1, 2, or 3 column layout. From there your design may get more complex then the illustrations below.

Is it one-column?

“Starter” HTML5

“Starter” CSS
Resource: VIDEO: One Column CSS Layout (Parts 1- 3)


 Is it two-column?

“Starter” HTML5

“Starter” CSS

Resource: VIDEO: Two Column CSS Layout (Parts 1- 2)


 Is it three-column?

“Starter” HTML5

“Starter” CSS


 Other Resources (Sample Code)

Two Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column/
Two Column Faux CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column_faux/
Three Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/3-column/

2 Column CSS Layout: Fixed Width And Centered

3 Column CSS Layout: Fixed Width And Centered

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">