Home arrow Style Sheets arrow Page 7 - DIV Based Layout with CSS
STYLE SHEETS

DIV Based Layout with CSS


Most Web page designers use a table-based layout to achieve a coherent and consistent look. There's a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders. Alejandro Gervasio explains how it's done, with copious examples.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 794
December 21, 2004
TABLE OF CONTENTS:
  1. · DIV Based Layout with CSS
  2. · The table-based approach
  3. · The mighty DIV tag
  4. · Fixed layout design with fixed boxes
  5. · Three-column fixed layout
  6. · Fixed layout design with floating boxes
  7. · Adding a right column
  8. · Liquid design with floating boxes
  9. · Three-column liquid layout with floating boxes

print this article
SEARCH DEVARTICLES

DIV Based Layout with CSS - Adding a right column
(Page 7 of 9 )

As you can guess, with minor additions, we can add a right column to our layout:

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  width: 800px;
  height: 100px;
}
-->
</style>

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>

And, the compete code is listed below:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

The visual output is almost the same as for fixed boxes:

DIV Based Layout with CSS

In this case, the same principle has been applied to make our DIVS float to left. Since the left section floats to the left, so does the content section and the right section. Actually, all of they are sticking to the left, achieving the desired result. Again, this technique saves code as compared to using fixed boxes.

Lastly, but not least, will see the “Holy Grail” for page layouts: “liquid” design with floating boxes. Let’s go there now.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials