dynamicreport.com News Member Login Knowledge Base Site Map
Support Support Ticket Contact Us
Products Drag & Drop Objects Drag & Drop Calendar UNIGEN Web Reporting Code View
Testimonials Downloads
Order

Knowledge Base Print printer-friendly page.

Login

UNIGEN

ddobj

News



Article #1002: Layering Fixed-Width Web Page Layouts Using CSS Styles

 

Although it is recommended that divs be used for page layouts there may be situations when tables still remain in use for complex layouts. They may be used solely on a Web page or they may coexist with layers and appear nested within them. Layers load and appear on a Web page much quicker than tables, which tend to be nested at greater levels than layers, and carry more overhead in terms of the markup and properties that comprise them. Layers load and appear progressively within a Web page during loading whereas tables appear only when the Web page has completed loading. Below is an example of a fixed-width Web page layout using left, center and right regions, which form a standard template using div layers. It is important to understand that the float: left and float: right CSS properties align layers either left or right relative to another layer. The property clear: both will clear the relative alignment and begin alignment of the next layer at an offset immediately below the previous relative layer of the greatest height. The absolute pixel width of the layout could be substituted for the relative width of 100% in the example below, since this is a fixed-width layout. The properties text-align: center and align: center align the text and entire containing layer, respectively.

<div style = "width: 400px; margin: 0px auto; align: center; background-color: #333333;" id = "main">

  <div style = "width: 100%; float: left; background-color: #00CCCC;" id = "top">
    <p style = "text-align: center;">center top header content here</p>
    <p>center top header content here</p>
  </div>

  <div id = "center">
    <div style = "width: 100px; float: left; background-color: #FF0000;" id = "left">
      <p>center left content here</p>
      <p>center left content here</p>
      <p>center left content here</p>
      <p>center left content here</p>
      <p>center left content here</p>
      <p>center left content here</p>
    </div>
    <div style = "width: 230px; float: left; background-color: #00FF00;" id = "middle">
      <p>center middle content here</p>
      <p>center middle content here</p>
      <p>center middle content here</p>
      <p>center middle content here</p>
      <p>center middle content here</p>
      <p>center middle content here</p>
      <p>center middle content here</p>
    </div>
    <div style = "width: 70px; float: right; background-color: #0000FF;" id = "right">
      <p>center right content here</p>
      <p>center right content here</p>
      <p>center right content here</p>
      <p>center right content here</p>
    </div>
  </div>

  <div style = "clear: both; width: 100%; background-color: #AAAAAA;" id = "bottom">
    <p style = "text-align: center;">center bottom footer content here</p>
    <p style = "margin: 0px;">center bottom footer content here</p>
  </div>

</div>

Code View - dynamicreport.com

The example below depicts the explanation above for creating a fixed-width Web page layout using div layers only. Tables and other elements may be contained in any of the template layers. Text paragraphs have been placed inside each layer for the sake of simplicity. Note that the layout is vertically dynamic, but horizontally static.

center top header content here

center top header content here

center left content here

center left content here

center left content here

center left content here

center left content here

center left content here

center middle content here

center middle content here

center middle content here

center middle content here

center middle content here

center middle content here

center middle content here

center bottom footer content here

center bottom footer content here

 

 


Back to article listing

 



 

Copyright © 2007-2008 Interaxis. All rights reserved.
Contact Webmaster