Left to right, Col1 id 560px wide with 10 px padding, middle column, 250px wide with 5px padding and Col3 (siderbar) is 200px wide with 3px padding. Background coloR, no matter text length in any column should stretch vertically equal. No javascript (jQuery workarounds) to make it work. It needs to be pure Semantic Markup with CSS. Each Column should have a nested column of color were content will go. Column 1 should be SEO prominant which means the highest nested column for Google and other Search Engines to crawl. I have used 'The Holy Grail" layout, articles at "A List Apart" and these solution are so convoluted that they push the main columns left and than the nested columns push them with padding back right. This is crazy! I try to adjust these examples, but they're not editable by just adjusting a width in the CSS or the padding, etc. Can you please help me?
views:
39answers:
1The known solutions are complex because, unfortunately, what you are describing is just not easily accomplished in pre-HTML5/CSS3. It's not crazy, it's the state of the art. The people who developed and describe the solution in A List Apart are the authoritative industry experts on figuring this stuff out.
The best options we have are either to use JavaScript to compute column size and lay it out at runtime, or be satisfied with the manual tweaking required by a pure CSS solution. For most sites, I recommend using JS, since good column layout can be considered an "enhancement" - the semantic markup laid out vertically is still readable, and SEO-optimized, and JS-enabled clients can progressively enhance that markup to have a pretty, 3-column presentation.
If your site is public-facing and has a typical demographic distribution, you're looking at ~90% with JS enabled, and the remaining 10% are accustomed to sites not being very pretty or looking quite right.