Today, I spent several hours working to convert my site layout from tables into CSS. You probably won’t see the new files until I finish writing the new templating code but I think you should know something.
If you want to create a layout with a full-width header, body with full-height sidebar, and full-width footer, don’t mess around with positioning. It will only waste your time. Use the existing text flow system to your advantage.
In other words, set the sidebar as “float: left;” or “float: right;” and then use margins or padding to prevent the main content window from flowing under the sidebar. I’m an experienced programmer and in the end, I had to ask someone else for help. This little tidbit of advice could save you hours of stress.
If you want a simple example, my new site will give you one.
Web Design – Proper CSS Positioning by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution under the same terms as the associated post.
All comments are moderated. If your comment is generic enough to apply to any post, it will be assumed to be spam. Borderline comments will have their URL field erased before being approved.