For a while now i've been creating all my layouts using DIVs and CSS instead of tables.. Although I've only ever had one main problem which I can't solve - this being it.

What I want to be able to do is have two DIVs next to each other, like in the image below, one for the main the content and the other for the navigation.. like the sidebar to the right on this site.

I've tried using absolute posistioning but then the problem is the nav and main area have to be set at a certain height and then use overflow, which adds the scrollbars to these areas, to be able to display the footer DIV underneath.. maybe theres a way around this I dont know?

So Basically what I want to be able to do is have it so the main content and navigation DIV can be any height.. depending on whats inside of them.. and then the footer DIV is always displayed at the bottom. So the footer always remains at the bottom regardless of which DIV, main or nav, is larger. Like in the examples below.

I know this could easily be achieved using tables.. but I would rather do it using simple just CSS.

Hope this makes sense.. this would off a GREAT help if I can finally understand this.

Thanks in advance.

Add this to your footer div css:

  clear: both;

or have something like this:

<div id="page">
   <div id="header">...</div>
   <div id="content">
      <div id="main">...</div>
      <div id="nav">...</div>
      <div style="clear:both">&nbsp;</div>
   </div>
   <div id="footer">...</div>
</div>

Thanks! Easier than I thought!

You could always P tag in the php include at the bottom of your content div( I assume that this is the one that is all different sizes)

Hey
Try working with this template layout at 2 Column Layout

It is one of a few layouts from an article at AlanWho - 7 CSS XHTML 1.1 Layouts

Hope this helps.

Peace.

Take a look at the code at Primary Health Group - Johnston Willis, you'll see how to do what you want. In that site the nav is on the left, easy enough to switch. You'll also see the one of the ways to clear a float (no non-breaking spaces necessary).