1 reply [Last post]
vmcg
Offline
newbie
Last seen: 2 years 22 weeks ago
Timezone: GMT-5
Joined: 2012-02-20
Posts: 1
Points: 2

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 2 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me