Fluid, variable width columns in CSS

A little while ago, I made an addendum to one of my themes trying to prove a point that displaying a lot of content is possible without major HTML and CSS surgery.

But in retrospect, the approach I took, creating a separate “segment” class and having separate “content” and “sidebar” classes, seems a bit silly. It clearly violated the DRY principle since I was overlooking one important fact…

“Content” and “Sidebar” are basically columns of different width

Once I finally realized this fundamental aspect of layout presentation, then all else fell into place. Now there is no need for a “full” class since any content that doesn’t belong to a column automatically takes up the full width.  The rest of the content can be displayed by using percentages relative to the full width of the container.

The Content and Sidebar sections can now be realized by applying a 2/3rds width and 1/3rd width columns respectively and other percentages can be used to mix and match columns on any page segment.

Previously, there was also an “extras” div that was inherited from the Mod Portal theme from which this all was derived. Now this too was eliminated by using three 1/3rd width columns in a separate “body” segment.

You can see the final result of the changes and it is proportionally lighter in CSS and HTML than with the previous iteration. I also added a login/registration form since that was also originally part of Mod Portal, increased the font sizes in the navigation bar, changed some of the colors for clarity and added comments in both the HTML and CSS.

2 thoughts on “Fluid, variable width columns in CSS

    • Thanks, Steve!

      Incidentally, I was inspired to do this as I was passed out in front of the fan. It’s bloody hot in Sri Lanka.

      I think I too will make an investment in some of those wif… er… A-shirts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s