XHTML Layout Structure

Owned by Jason Jason
Last updated: Feb 21, 2005Version comment
1 min read

What do we want our output to look like?

I think we should target XHTML Transitional 1.0. Mostly because I can think of a number of usecases where target=_blank" is just the simplest way to pop up a new window.


<html>
 <head>
 </head>
 <body>
  <div id="header">
  </div>
  <div id="content">
  </div>
  <div id="footer">
 </div>
</body>

</html>

Although I would LIKE to go with an all div, purely positioned layout, our experience at Rutgers has been that using a single table for our columns is less problematic overall. It kind of makes semantic sense (a table of channels - a stretch I know) and renders much more consistently in browsers, particularly when users have a narrow browser window.

Of course the disadvantage is that it's much harder to do neat CSS tricks like automatically reducing the number of columns if the width gets very small.

For channels I'm thinking something like:

<div id="n10008" class="portlet">
 <div class="titlebar">
  <h2>Channel Title</h2>
  <div class="controls">
   <a class="control" href="ACTIONURL"></a>
   <a class="control" href="ACTIONURL"></a>
   <a class="control" href="ACTIONURL"></a>
   <a class="control" href="ACTIONURL"></a>
  </div>
 </div>
 <div class="contents">

  Channel contents here.

 </div>
</div>