RobLab addition – Dynamic column width without tables
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.
Is there an example somewhere?
In general, I agree with you. There should normally only be one (correct) version of the code.
But because <acronym title="Internet Explorer">IE</acronym> has got such an extremely poor support for <acronym title="Cascading Style Sheets">CSS</acronym>, 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 <code>position:fixed</code> for other browser to have a footer that's constantly located at the bottom of the page, than to use frames for it.
If you mean the dynamic columns, there's a link in my post above to it.
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 <abbr title="Customer Relationship Management">CRM</abbr> system for a Government initiative here [<abbr title="United Kingdom">UK</abbr>] 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.
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 <acronym title="Cascading Style Sheets">CSS</acronym> 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?
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.
Ah, good, then it should be ok. 🙂
Good luck now when you have time to focus on the most important part of your solution! 😉