Making CSS Layouts
Basic two column layout with left menu:
Code
<html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
}
#content {
margin-left: 200px;
padding: 0px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
<head>
<title>Two Column CSS Layout</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
}
#content {
margin-left: 200px;
padding: 0px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
----------------
Basic two column layout with right menu:
Code
<html>
<head>
<title>Two Column CSS Layout with Right Menu</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
right: 5px;
padding: 0px;
width: 150px;
}
#content {
margin-left: 0px;
padding: 0px;
margin-right: 200px;
}
</style>
</head>
<body>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
<head>
<title>Two Column CSS Layout with Right Menu</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
right: 5px;
padding: 0px;
width: 150px;
}
#content {
margin-left: 0px;
padding: 0px;
margin-right: 200px;
}
</style>
</head>
<body>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
----------------
Basic two column layout with header:
Code
<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="header">
Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
</div>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="header">
Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
</div>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
----------------
Basic three column layout:
Code
<html>
<head>
<title>Three Column CSS Layout</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#left {
position: absolute;
left: 5px;
padding: 0px;
top: 0px;
width: 150px;
}
#center {
margin-left: 200px;
padding: 0px;
margin-right: 200px;
top: 0px;
}
#right {
position: absolute;
right: 15px;
padding: 0px;
top: 0px;
width: 150px;
}
</style>
</head>
<body>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id="right">
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
<head>
<title>Three Column CSS Layout</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#left {
position: absolute;
left: 5px;
padding: 0px;
top: 0px;
width: 150px;
}
#center {
margin-left: 200px;
padding: 0px;
margin-right: 200px;
top: 0px;
}
#right {
position: absolute;
right: 15px;
padding: 0px;
top: 0px;
width: 150px;
}
</style>
</head>
<body>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id="right">
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
----------------
Basic three column layout with header:
Code
<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>
<body>
<div id="header">
Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
</div>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id="right">
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>
<body>
<div id="header">
Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
</div>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id="right">
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
If you need any help, just reply or PM me.
