I have rebuilt my layout numerous times ( I currently have 7 different copies of various layouts.) I have done tutorials, and have used various ideas and bits and pieces to try to accomplish a layout which I want.
My Goal: Fixed header with navigation tabs. Fixed footer. 2 columns - Left main content using approx 80%, right information column using the rest.
This all fits into approx 80% of page width.
With the fixed footer and header, the two columns can scroll up or down "behind the header and footer".
I will be using the layout to display gridviews of data from a SQL database, and also various charts.
The layout is nearly there, in terms of all the elements being where they should be, but for the life of me, I cannot get the two columns to line up next to each other. I want a "liquid - floating" format where the two columns will always stay in their respective corners.
This is a must have.
Lastly, something that I would also like, is for my container body, to stretch from header to footer, behind the two columns, even if the columns are short.
It will not often happen that my pages are short, but sometimes it will.
Is there someone kind enough to point out where I am going wrong? ( I know there is much yet still to be done, but would like to get my foundation sorted. The colors are just so that I can see the layout clearly)
The problem you're having is caused by the padding on main and right divs. If you take off the padding, you will see it resolves the issue. Either remove the padding, or reduce your width % slightly to accommodate. Hope this helps.