I have 3 columns:
#left, #middle, #right
If I want to use all 3 columns on the page at once I want the following widths for each:
#left { width: 200px; }
#middle { width: 600px; }
#right { width: 200px; }
Some pages drop the left / right columns, and the middle column increases in size, for example:
#left { width: 200px; }
#middle { width: 800px; }
or
#middle { width: 200px; }
#right { width: 200px; }
My question is how could I control these varying widths in CSS and not have no rely on Javascript? So the 3 scenarios would be:
#left + #middle + #right
#left + #middle
#middle + #right
By managing classes or ids
By managing classes or ids via a backend scripting e.g PHP use it to determine type of page your on and add an appropriate class or id to the body or html element element then you can have varying widths for columns based on a parent name.