[CSS] DIVs next to each other (and DIVs VS Tables all over again)

Let me guess - you need a page header/footer and you wanna use DIVs 'cause your buddy on digg or reddit says tables are soooooooo uncool? 

Here's a few CSS classes that will get you were you want to be:

.left {
width: 80%;
heigth: 10%;
position: relative;
float: left;
}

.right {
width: 20%;
heigth: 10%;
position: relative;
float: right;
}

.wrapper {
width: 100%;
position: relative;
clear: both;
}

And here's an example of the markup you might be looking for:

<div class="wrapper">
 <div class="left">
  <!-- Whatever - maybe a lame logo -->
 </div>
 <div class="right">
  <!-- Whatever - maybe login stuff -->
 </div>
</div>
<div class="wrapper">
 <!-- Content -->
</div>

You can repeat this basic Header structure as much as you want if you need nested divs to resemble (here I say it) tables.

But - on a side note - using a table would be much more intuitive 'cause you know what a table is and how it looks like. You certainly don't need to remember loads of crazy CSS properties semantically and visually unrelated to what your trying to do.

Ok, if we're really doing this ... truth is everyone started using DIVs because the word has been spread that using nested tables is unprofessional. This is not totally untrue, but guess what - nesting hundreds of DIVs will bring you nowhere good in terms of maintainability at much lower speed.

My personal choice is a moderate one, try to stay in control finding the balance using a bit of both, DIVs within tables or tables within DIVs, to keep the built-in simplicity of tables and the advantages of DIVs.

Look at this:

If Amazon uses that many nested tables (that's 35 results for the table opening tag in the home page) no-one's gonna bug you for using a few (except those W3C pansies).