Flexible 2 Column CSS Layout

This template demonstrates does not use tables to create website. The CSS layout flexibility to display your page with a web browser window size changes.

The following figure shows the original 2 column CSS layout. The left is the navigation links, while the right is the main content.
Flexible 2 column CSS layout - before zoom in the web browser
Figure 1

Figure 2 shows the different, when zoom in the web page in the web browser. It will flexible to follow the page to zoom in or out to wrap the text in order to look more tidy.
Flexible 2 column CSS layout - after zoom in the web browser
Figure 2

This 2 column CSS layout is great to deal with the global users of different screen sizes.

Resources:

CSS Code

html {
  padding:0px;
  margin:0px;
}

body {
  font-family: Georgia, Serif;
  padding: 0px 20px;
  margin: 0px;
}

#menu {
  position: absolute;
  width: 150px;
  left: 20px;
  padding:20px;
  margin:0px;
  background: #FFFFCC;
  border: 1px dashed #CCCCCC;
}

#menu a {
  font-size:12px;
  line-height:2;
}

#content {
  margin-left: 205px;
  overflow: auto;
  background: #F5F5F5;
  padding: 0px 10px 10px 10px;
}

h1 {
  font-size:large;
  padding-top: 10px;
}

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flexible 2 column CSS layout</title>

<style type="text/css">

html {
  padding:0px;
  margin:0px;
}

body {
  font-family: Georgia, Serif;
  padding: 0px 20px;
  margin: 0px;
}

#menu {
  position: absolute;
  width: 150px;
  left: 20px;
  padding:20px;
  margin:0px;
  background: #FFFFCC;
  border: 1px dashed #CCCCCC;
}

#menu a {
  font-size:12px;
  line-height:2;
}

#content {
  margin-left: 205px;
  overflow: auto;
  background: #F5F5F5;
  padding: 0px 10px 10px 10px;
}

h1 {
  font-size:large;
  padding-top: 10px;
}

</style>
</head>

<body>

<br />

<div id="menu">
<a href="#">Link number one</a><br>
<a href="#">This is article one</a><br>
<a href="#">This is article two</a><br>
<a href="#">This is article four</a><br>
<a href="#">This is article five</a><br>
<a href="#">This is products one </a><br>
<a href="#">This is products two</a><br>
<a href="#">This is products four</a><br>
<a href="#">And more</a>
</div>

<div id="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>


</body>
</html>

Webmaster » XHTML CSS » You are here

Related Links:

CSS Basic Formatting Code

Home | Sitemap | Bookmark This Page

Sponsored Links