[AblazeRich]

I've been a web designer for awhile, but have steered round DIV's and used TABLE's instead (except for things like drop down menus and bits of code I've pinched from Javascript libraries etc). This is now no longer fashionable and I am applying for jobs. So I really need to update my skills to include DIV's.
So if you knowledgable lovely people don't mind, can I please pick your brains?

1)Does all this mean that to position further DIVs you just place them within the wrapper DIV tags (in the HTML)?
(nested DIV's essentially). Will these DIV's use the wrapper DIV as their 'reference point' for their positioning?
For instance if you use
left:20px;
top:20px
for a nested DIV will it draw it 20px from the top left from the wrapper DIV or from the top left of the page?

2)Is it common to have DIV websites stretch to whatever screen size the user is using? Or do people tend to design for the smallest resolution (800px by 600px for example) And just centre the content for larger resolutions? This is how I design for the vast majority of my table based designs.

3)Is there any indepth DIV tutorials that you would recommend?

Kind Regards
Rich

[Wickham]

1) If your nested divs have position: absolute and top, right, left or bottom sizes they will take positions from the first parent that has position: relative, or the body if no parent has position: relative. So in your case you would probably need to have position: relative in the wrapper style and the position: absolute nested divs take positions from the wrapper corners.

Position: relative nested divs usually don't have top, right, etc. positions as they flow with other content inside whatever parent they are coded.

2) Most people seem to code a fixed page width about 960px to 1000px now to suit 1024*768px screen resolution. Fluid width pages might expand to 1920px wide or squeeze to 240px wide on hand-held devices so it's difficult to manage that. Alternatively code min-width: ??px; and max-width: ??px; in px for the wrapper to stretch between those limits. Use margin: auto; in the wrapper style to center the wrapper in large width resolutions (a fixed or % width is needed for this to work, but not 100%).

3) http://www.w3schools.com/html/

I split out this post into a separate topic as it had little relevance to the pinned topic on centering divs.

This post has been edited by Wickham: 16 January 2012 - 07:43 PM