CSS positioning?

I am quite new at CSS positioning. I am still confusing at how to place a div blog from left to right like and top to bottom like this. Forgive me if this is too simple to implement with you.

+-------++-------++-------+
| div1  || div2  || div3  | 
+-------++-------++-------+
+-------------------------+
|          div4           | 
+-------------------------+

Code (markup):

 

Basicly the best way is to set the widths for the left and right div then, float the left div left, float the right div right and then use margins for the center div to position it in the middle of the two other divs. Then to get the next div to go on the next level like div 4 in your diagram you have to clear both floats.

Here is an exellent tutorial on the Holy Grail layout.

 

I prefer floating all the elements so that they are all effected by the presence of the other.

Div 1 - float left, Div 2 - float left, Div - 3 float right
clear both
Div 4 - float left,
clear left

 

What I want is to do what tables can do, for example I have a fix width=780px at the center of the page nomatter what size the browser is. (like my website, check my sig, currently use tables 'cause I was stucked with css)
I've check the Holy Grail example, but when I resize the browse, the middle column is resized and that's not the case.
It seems that the most important properties in CSS positioning is float and clear? Can some body give a simple and easy to understand of them? I've read the official site but it's still confusing.

 

You've pretty well described not only what you want but also how to get it. Begin with an over-all container; call it #wrapper

#wrapper {
    width: 780px;
    margin: 0 auto;
    }

Code (markup):

Now let's style the three across columns. We'll use an IE safe method that avoids some of the bugginess that PoS brings to the table.

#colA {
    width: 254px;  /*somewhat less than â…“ of the page width*/
    float: left;
    }

#colC {
    width: 254px;
    float: right;
    }

#colB {
    margin: 0 163px; /*margins prevent under-wrap of side columns and
                       provide for a 9px gutter*/
    }

Code (markup):

Now the one running across the bottom,

#footer {
    clear: both; /*this will naturally sit just under colC, but the clear
                   will ensure it goes below the longest column whichever
                   it is*/
    }

Code (markup):

Now to the html. Use a complete, strict DTD to trigger standards mode in all browsers. There's nothing good about each browser following its own set of rules; especially not IE.

<div id="wrapper">
  <div id="colA">
    <p>Left hand column</p>
  </div>

  <div id="colC">
    <p>Right hand column</p>
  </div>

  <div id="colB">
    <p>center column</p>
  </div>

  <div id="footer">
    <p>stuff that goes under the three columns</p>
  </div>
</div> <!-- end wrapper -->

Code (markup):

cheers,

gary

 

To: kk5st
Sorry for late reply, 'cause I was busy doing the academic stuffs. Really thank what you've explained. The example is simple enough and it works!

 

I just noticed this typo

#colB {
    margin: 0 163px; /*margins prevent under-wrap of side columns and
                       provide for a 9px gutter*/
    }

Code (markup):

The margin values should be "0 263px". Sorry if that caused anyone problems.

cheers,

gary