How to organize page layout with div's
css, html
Solution
In my opinion, here are some basic principles to keep in mind when structuring your site with CSS:
Positioning: A common mistake that visual developers make when constructing their first pure CSS site layout is to use absolute/relative positioning properties. When placing your elements on a page, it is all about the box model and how margins, padding and widths interact with each other. There is no need to use the position property at all until you are further along. There are some exceptions to this rule, but we'll keep it simple for now.
Wrappers & containers: Having mentioned the box model above, leads me to my next point. You should be able to position all of your structural elements using the margin property correctly. Sometimes developers mix up padding/margin which results in "unexpected" behavior. Let's say you want to create header, content, and sidebar elements. On top of that, you want to add content in those elements without messing with the parent elements. You need to set a specific height for your header (px, % etc.), you'll also need to set widths for your content and sidebar elements. When working with the content within these elements, I typically use another element which acts as a "container" for your content. Steer clear from redefining the size of the "container" element, because you would have already defined this in your parent element. This way, you are free to use margin, padding freely without affecting the size of the parent element... if that made any sense ;)
Clear your floats: To position your content and sidebar, or other column type elements you are going to have to use the float property on one or more of your elements. An important thing to keep in mind when using float is that you should clear them after you've finished a "float set". Meaning, if you have 3 columns, all with the float:left properties set, you should clear them after the set and NOT after each column. It depends on the layout but typically this way you'll control over floats and you won't run the risk of unexpectedly floating other elements that don't need it.
When in doubt, reset your margin/padding: Differences in browsers are frustrating to say the least. You can help combat this by destroying browser default properties if they are not defined. I always find that if reset the margin/padding to 0 for a questionable element, I can easily correct spacing issues.
Use the cascade, don't re-define: Remember that if you've already defined a bunch of css properties, and you are working within a child element, you don't need to redefine properties. Children inherit their parents properties so only define differences.
This will continue to make sense the more you work with it, but I hope this will provide you with some points to keep in mind when structuring a CSS layout. There are some links above that are great resources as well, but I thought I should share some of things I personally think of while working in CSS.
Acorn
Problem
I have a question for the more experienced programmers here. How can I best organize the div's to have like a left side, a middle side and a right side? I am doing my website now for a while and I spend half a day moving div's around because they don't stay in place after I put another one in and I want to work with the relative option. Also what I do is get them into position with big negative numbers. It just does not seem to be the right way to do things. I also get scrolbars when everything fits on the screen. Working in designmode in dreamweaver cs3 is not possible, because everything is tumbling all over each other. I am hoping for some input on how to do this better. thanks, Richard