I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis!

RobLab addition - Dynamic column width without tables

Published on Thursday, July 7th, 2005

I regularly express my opinions here about how things should be developed, and now I thought it was time to share something I recently created.

In my current project, I came across the need to have a dynamic column width, i.e. a minimum width but if the editors enter some content that would be wider than it is supposed to be (through their CMS“), it should react as a table does and dynamically resize itself and its sibling column.

Personally, I still wanted the control through CSS, therefore I created a CSS-based dynamic column width solution that I put in RobLab.

I also have a question: do you think it was worth it? Would you’ve done the same or resort to using tables?

PS. Thanks to Kristin VÃ¥gberg for being a good discussion partner while creating this. DS.

Posted in CSS, JavaScript | 6 comments

6 comments

Jens Wedin
July 7th, 2005 at 15:19

One thing about making special stuff for IE, are we going down the same road as we did in early 90’s with javascript, two versions, one for IE and one for netscape?

Is there an example somewhere?
Robert Nyman - author
July 7th, 2005 at 15:33

Jens,

In general, I agree with you. There should normally only be one (correct) version of the code.

But because IE has got such an extremely poor support for CSS, in some cases I choose to implement fixes to cover up for this to get a better web site in the end.

For example, I’d rather use this fix for fixed positioning in IE and position:fixed for other browser to have a footer that’s constantly located at the bottom of the page, than to use frames for it.

Is there an example somewhere?

If you mean the dynamic columns, there’s a link in my post above to it.
Edward Clarke
July 9th, 2005 at 14:20

It’s a nifty display of element manipulation within CSS and it’s something I’m currently looking into myself.

A recent task of mine is rolling out a CRM system for a Government initiative here [UK] called an Enterprise Hub. There is a particular section I am at requiring this feature however my approach is comparitavely simplistic, but works.

The structure is two columns within the page and the method I employed was to have a containing DIV, float a DIV nesting within it, control it’s width alone and let the rest of the data flow around it.

Visually it works for me on all browsers as the network is made up of all sorts of user agents and there is no script involved.

Tables are out for the fact there were two columns and no rows, neither of which are labelled. The content will fundamentally determine if you have employed the right approach to output the information and in my case it wasn’t justified.

Good example!
Robert Nyman - author
July 10th, 2005 at 12:53

Edward,

Thank you!

I didn’t want to resort to using scripts as my first option either, but the client in this scenario had at least five different columnar layouts and combinations that I needed to control.

Also, as in your case, there were no particular rows to speak of either, so a table felt like the wrong approach, and the control I gained through CSS was amazing!

To me, I couldn’t use your technique since both columns’ width would be dependant on how wide the other column got. And, in your solution, doesn’t the content flow below your fixed width column as well, if the that one isn’t high enough to match the other one?
Edward Clarke
July 15th, 2005 at 20:52

doesnâ€™t the content flow below your fixed width column as well, if the that one isnâ€™t high enough to match the other one?

Aye, it does, but in this instance the content rarely extended beyond 3 lines so it was easy to deal with.

I’ve spent the best part of a week writing stored procedures for SQL Server 2000 on the dedicated server that drives this system so now I’m back on the front-end I’ll polish it up and employ a variant of your method to keep it far more robust.
Robert Nyman - author
July 16th, 2005 at 9:29

Edward,

Aye, it does, but in this instance the content rarely extended beyond 3 lines so it was easy to deal with.

Ah, good, then it should be ok.

Good luck now when you have time to focus on the most important part of your solution!

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.