Fixed One-Column Layout (Basic) : One Column « Layout « HTML / CSS






Fixed One-Column Layout (Basic)

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fixed 1-column layout (basic)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*******************************************************
TITLE: Fixed One-Column Layout (Basic) V1.1
DATE: 20070824
AUTHOR: The CSS Tinderbox - http://www.csstinderbox.com
*******************************************************/

body {
margin:.5em;
padding:0;
height:100%;
background-color:#ffffff;
color:#000000;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}

a {
color:#cc0000;
text-decoration:underline;
}

a:hover {
color:#cccccc;
text-decoration:none;
}

p {
margin:6px 0;
}

blockquote {
margin:16px;
padding:8px;
background-color:#eeeeee;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}

blockquote p {
margin:.2em;
}

ul {
list-style-type:disc;
}

li {
margin:0 0 0 25px;
list-style-type:disc;
}

#centerColumn {   
margin:0 auto;
padding:1em;
width:600px;
text-align:left;
vertical-align: middle;  
background-color:#ffffff;
border:1px solid #cccccc;
}

#centerColumn h2 {
margin:0 0 0 0;
padding:6px 0;
font-size:1.2em;
letter-spacing:.1em;
}

#header {
margin:0 0 0 0;
padding:0 0 0 0;
height:160px;
background-color:#ffffff;
border:1px solid #cccccc;
}

#header h1 {
margin:0 0 -8px 0;
padding:16px 0 0 24px;
font-size:1.7em;
letter-spacing:.1em;
}

#header h2 {
margin:0 0 0 0;
padding:16px 0 0 24px;
font-size:.9em;
font-weight:lighter;
letter-spacing:.1em;
}

#fauxRightColumn {
position:relative;
float:right;
margin:.5em 0 0 .5em;
padding:0 .7em .25em .7em;
width:11em;
font-size:.9em;
background-color:#ffffff;
border:1px solid #cccccc;
}

#fauxRightColumn h2 {
font-size:.9em;
}

#nav ul {
margin:0;
list-style:none;
}

#nav li {
margin:0 0 8px 0;
list-style:none;
}

#nav li a {
text-decoration:underline;
}

#nav li a:hover{
text-decoration:none;
}

#footer {
position:relative;
bottom:0;
margin:80px 0 0 0;
padding:0;
height:64px;
line-height:64px;
text-align:center;
font-size:.7em;
background-color:#ffffff;
border-top:1px solid #cccccc;
}

</style>


<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="centerColumn">
  <div id="header">
    <h1>site title</h1>
    <h2>fixed 1-column layout (basic)</h2>
  </div>
  <!--//end #headern//-->
  <div id="fauxRightColumn">
    <h2>fauxRightColumn</h2>
    <ul id="nav">
      <li><a href="#">Link Item</a></li>
      <li><a href="#">Link Item</a></li>
      <li><a href="#">Link Item</a></li>
    </ul>
    <p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.</p>
  </div>
  <!--//end #fauxRightColumn//-->
  <h2>centerColumn</h2>
  <p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
  <h2>Header 2</h2>
  <p><a href="#">Link Item</a></p>
  <ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item
      <ul>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </li>
  </ul>
  <blockquote>
    <p><strong>blockquote</strong><br />
      Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.</p>
  </blockquote>
  <div id="footer"> <a target="_blank" href="http://validator.w3.org/" title="W3C HTML Validation">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/validator-uri.html" title="W3C CSS Validation">CSS</a> | <a target="_blank" href="http://www.w3.org/TR/WCAG10/" title="Web Content Accessibility Guidelines">WCAG</a> | <a target="_blank" rel="nofollow" href="http://www.csstinderbox.com">The CSS Tinderbox</a>
    </p>
  </div>
  <!--//end #footer//-->
</div>
<!--//end #centerColumn//-->
</body>
</html>

   
    
  








Related examples in the same category

1.One column with two DIV section
2.Single column
3.Header with one column under
4.One column with content on the top and menu at the bottom
5.One column with content on the top and menu at the bottom, and margin in between
6.One column with header and footer only
7.One column: header, content
8.1 column, header, content, footer
9.Single column with header and footer
10.Header, sub header, footer with one column
11.One column with header and footer
12.Single Columns with CSS
13.Liquid Design in CSS
14.Article layout
15.Fixed One-Column #2 Layout (Basic)
16.Fixed height, three parts, single column