Absolute, relative, fixed! Oh My!

[RGL]

I'm having an issue. I'm attempting to set up a simple site using <div>'s instead of tables.

The page layout is straight forward. I'll have a header which will go across the top of the page. There will then be three columns under that with the site links and content and then the typical footer section with the typical links there. The CSS I started with looks something like this:

#header{
position: fixed; 
top: 0px; 
right: 0px;
} 

#left{
top: 0px; 
right: 0px;
position: relative;
margin: 0 auto;
text-align: left;
width: 30%;
padding: 30px; 
}

#center{
top: 0px; 
right: 0px;
position: relative;
margin: 0 auto;
text-align: left;
width: 30%;
padding: 30px;
} 

#right{
top: 0px; 
right: 0px;
position: relative;
margin: 0 auto;
text-align: left;
width: 30%;
padding: 30px;
} 

#footer

I'm sure this is pretty much useless at this point. Would someone please help me out?

[felgall]

Use position:fixed when you want something to remail in place in the window rather than scrolling with the page. IE6 doesn't support it so you need to use a JavaScript workaround for that browser.

Use position:relative when you want to swap the order in which columns appear in the page or you want to have elements overlap.

Use position:absolute with position:relative for overlapping elements or by itself for elements to be moved around using JavaScript.

For everything else use position:static (which is the default).

For regular page layout where everything is in the order it needs to display in and nothing overlaps you can position everything correctly using float, clear, width, overflow, margin, and padding.

[Centauri]

Have a look at http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

[kjeet]

If I understand clearly u r not able to get the overall layout for ur webpage and u want to laout ur page by divs rather than table.
as I have seen in IE divs size depends on what it is contained in it if u set the size in percentage so write a javascript which gets the size of screen and sets that size to div...run this JS onload and onresize of body.

[Centauri]

If I understand clearly

Unfortunately I can't say the same for your post ....