Simple CSS for a Content Management System

Dynamic CSS for a page layout which I’ve used for a Content Management System it supports IE6, IE7, IE8, Firefox, Chrome, Safari and Opera.

   1: <html>
   2: <head>
   3: <title>THD Web Development</title>
   4: <style>
   5: .content { width:900px;}
   6: .row { clear:both;}
   7:
   8: .column-half { width:450px; float:left; }
   9: .column-third { width:300px; float:left; }
  10: .column-quarter { width:225px; float:left; }
  11:
  12: .item { float:left; clear:both; margin:5px; background-color:gray; height:200px; text-align:center; font-size:20px; color:#fff; font-weight:bold;}
  13: .column-half .item { width:440px; }
  14: .column-third .item { width:290px; }
  15: .column-quarter .item { width: 215px;}
  16:
  17: </style>
  18: </head>
  19: <body>
  20: <div class="content">
  21:     <div class="row">
  22:         <div class="column-half">
  23:             <div class="item">Item</div>
  24:             <br style="clear:both;" />
  25:         </div>
  26:         <div class="column-half">
  27:             <div class="item">Item</div>
  28:             <br style="clear:both;" />
  29:         </div>
  30:     </div>
  31:
  32:     <div class="row">
  33:         <div class="column-third">
  34:             <div class="item">Item</div>
  35:             <br style="clear:both;" />
  36:         </div>
  37:         <div class="column-third">
  38:             <div class="item">Item</div>
  39:             <br style="clear:both;" />
  40:         </div>
  41:         <div class="column-third">
  42:             <div class="item">Item</div>
  43:             <br style="clear:both;" />
  44:         </div>
  45:     </div>
  46:
  47:     <div class="row">
  48:         <div class="column-quarter">
  49:             <div class="item">Item</div>
  50:             <br style="clear:both;" />
  51:         </div>
  52:         <div class="column-quarter">
  53:             <div class="item">Item</div>
  54:             <br style="clear:both;" />
  55:         </div>
  56:         <div class="column-quarter">
  57:             <div class="item">Item</div>
  58:             <br style="clear:both;" />
  59:         </div>
  60:         <div class="column-quarter">
  61:             <div class="item">Item</div>
  62:             <br style="clear:both;" />
  63:         </div>
  64:     </div>
  65: </div>
  66: </body>
  67: </html>

This example gives you the basic idea how to build your page up using this very simple CSS.

In summary:

1) Divided the page up by rows using <div class=”row”> </div> give this a clear:both

2) Divided each row up into columns as needed using <div class=”column-half”> </div>, define a width:300px to each column and float:left. At the bottom of each column put a <br style=”clear:both” />  this is an IE6/7 fix for when you margins to you content items.

3) Then wrap all your content items within each column in a <div class=”item”> </div>  and float:left with clear:both you can then add a margin:5px which give’s an even spacing around you page.

One of my favourite things about this layout is that you can customise content items depending on the container they sit in…. .column-quarter .item { width: 215px;} which really gives this approach so much flexibility and is idea for use in an CMS system.

I will be putting more tips about CSS source code management up in the near future.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: