I am designing a Web site and have worked very hard to create my layout in the recommended way using CSS positioning (relative and absolute and numerous other settings for <div> containers) rather than tables. I got several pages to look really nice, but then as an experiment, I decided to resize my browser (Firefox/Linux version), making its width smaller and smaller. A horizontal scroll bar appeared as expected, but the layout became totally jumbled (overlapping, overwriting, etc.--a total mess). The positioning of elements was completely lost. I have been using the O'Reilly book, "CSS The Definitive Reference," as my main reference. After discovering the above problem, I looked at this Forum and joined it. I read the sticky, "Absolute Positioning Pitfalls," and also the article referred to in one of the responses, "CSS Positioning" at brainjar.com. However, that article itself lost its positioning when I made the browser width smaller!!! I am almost ready to conclude that the old way of doing layout with tables is better: simpler, faster to write, and the only way to ensure things will really appear in the right places regardless of what the user does with his browser. Can a layout REALLY be protected against jumbling and overwriting without using tables? Any general comments or advice?
Just keep trying... I've been through the same thing years ago. I became frustrated with how CSS worked, but I kept on reading and discovered a few basics which really help out. One thing I would suggest is using a wrapper with a fixed width (920 pixels, most of the time) which holds all other elements. In this way your 'flow' doesn't depend on the browsers width. Smashing magazine has a great reference article to loads of resources regarding this topic (Google CSS Float Theory: Things You Should Know, I'm not allowed to post links just yet ;-)). Another thing which can help a big deal is inspect the elements on website in Firefox and Firebug and see how others work around these problems.
There's some great sites with all sorts of tricks to help you out, like alistapart.com. When ever I'm stuck I just google the problem and wade through the results until I find the solution.
Designing with CSS may seem time consuming at first, but once you start learning more CSS techniques along with its different properties, you'll be happy with the change you made. When I first started designing with CSS after moving from tables, I too used absolute positioning. However, I began to realize that absolute positioning restricts stretching and that all the placement calculating I was doing is overly time consuming. I've learned that the natural downward flow of HTML elements along with the incorporation of floats, margins, and size restrictions are more than enough to create a layout. Your issues with overlapping probably has to do the combination of absolute positioning and the lack of width restrictions using pixels. If you don't restrict some widths by pixel, when elements are squeezed horizontally, they stretch vertically. Since you may have elements below abolsolutely positioned, the vertical stretching will overlap with the elements below and won't be able to push them down.
Don't give up! When I made the transition from tables to css you could hear me screaming from coast to coast. Now I can create a layout almost faster in CSS than the old table way. Practice makes perfect. +1 on the container advice. Put everything in a fixed width container (920 was mentioned, I usually use 960px wide for 1028 width with scrollbar.) Absolute positioning is more hassle than it's worth. I generally start with a container and add divs inside with colored backgrounds to start (no content in the divs). The colors give you a visual of how the block is displayed on the page. Then build from there. AssistantX offers great advice as well. See attachment
Just so everyone knows, these posts have Bogus written all over them. This is almost a copy of a post by someone at another forum. Yet another post here at DP is a copy of another post, by a different member, on another forum. These are repeated word for word, and were likely taken from the other forum to make serious-sounding questions so the poster could increase his post count (just a guess). Here is the original post if anyone wants to see some other answers offered (and no, the OP there I do not believe is the same as this Paul): http://csscreator.com/node/36730