Question

I’m trying to convert my site from using tables to just using css and divs but I’m running into a lot of problems with trying to figure how to exactly do it, I’ve been looking for tutorials on centering a site with css and how to put divs side by side but I can’t really find one that does both and I keep getting confused by how to exactly achieve this, I asked around a bit and I got told to use absolute positioning but still I can’t really wrap my head around this.

So basically how would I arrange the 2 central div side by side while keeping the whole thing centered in the browser? The following image is the layout I’m trying to achieve:

the blue boxes are eventual other stuff I might want to put in them, such as a blog requiring again the use of side by side divs.

right now I have the following layout:

<div id="wrap">
  <div id="banner"> banner </div>
  <div id="navbar"> navigation links </div>
  <div id="body"> stuff </div>
  <div id="footer"> stuff </div>
</div>

Answer 1

General idea: http://jsfiddle.net/JjbJE/

A little specific but provide you a great adventure to learn HTML | CSS : http://jsfiddle.net/JjbJE/3/

float:left|right this property does the side by side trick

clear:both this property clear away the float property

Other things are pretty easy to learn, just head to W3Schools