Code for 1, 2, and 3 CSS Column Layouts

Strategize your plan for the layout

Below is the HTML 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” HTML
<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="header"> </div>

<div id="content"> </div>

<div id="footer"> </div>

</div>

</body>
</html>
“Starter” CSS
*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 130px;
}
#content {
    width: 990px;
}
#footer {
    height: 50px;
    clear: both;
}

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


 

 

Is it two-column?

“Starter” HTML
<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

<div id="header"> </div>

<div id="sidebar"> </div>
<div id="content"> </div>

<div id="footer"> </div>

</div>

</body>
</html>
“Starter” CSS
*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 130px;
}
#sidebar {
    width: 390px;
    float: left;
}
#content {
    width: 600px;
    float: left;
}
#footer {
    height: 50px;
    clear: both;
}

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


 

 

Is it three-column?

“Starter” HTML
<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

<div id="header"> </div>

<div id="leftsidebar"> </div>
<div id="content"> </div>
<div id="rightsidebar"> </div>

<div id="footer"> </div>

</div>

</body>
</html>
“Starter CSS
*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 130px;
}
#leftsidebar {
    width: 245px;
    float: left;
}
#content {
    width: 500px;
    float: left;
}
#rightsidebar {
    width: 245px;
    float: left;
}
#footer {
    height: 50px;
    clear: both;
}

 


 

 

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 *