Articles

Navigation ( archives ›› 2006 ›› May ›› 29 ›› Creating a Dynamic Fluid Layout )

Creating a Dynamic Fluid Layout

Posted on May 29, 2006, 8:36 pm EST

Simple, yet small code to create a fluid website template under CSS and XHTML.

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-s...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>A Webpage that changes size to fit window</title>
  <!-- BEGIN: Cascading Style Sheet -->
  <style type="text/css">
    body {background:#000;}
    #container {margin:0;padding:0;width: 90%;margin:0 auto;}
    #header {padding:5px;background:#eee;}
    #content {padding:5px;background:#fff;}
    #footer {background:#ccc;}
  </style>
  <!-- END: Cascading Style Sheet -->
  </head>
<body>

<!-- BEGIN: #Container - to hold the website -->
<div id="container">
  <!-- BEGIN: #Header - The logo of the website -->
  <div id="header">
    <h1>My Website</h1>
  </div>
  <!-- END: #Header -->

  <!-- BEGIN: #Content - The information going to be -->
  <div id="content">
    <p>Hello There</p>
    <p>Hello There</p>
    <p>Hello There</p>
  </div>
  <!-- END: #Content -->

  <!-- BEGIN: #Footer - The footer of the webpage -->
  <div id="footer">
    <span>Copyright 2006, designed within 10min by m0</span>
  </div>
  <!-- END: #Footer -->
</div>
<!-- END: #Container -->
</body>
</html>

This html script will dynamically change to fit 90% of the screen.

This is just an example on how to make a simple layout using technology such as CSS and XHTML.

Note that I am using CSS to style the plain page. By using CSS it allows me to change the style (the way the website looks) withought altering the code or script.

About this Article:

Comments (0) - Add yours, or View the replies

Categoy (WebDesign)

Views (2418)

Digg it: Digg this article