Escaping Tables With CSS
I must say that I've become a fan of CSS and the ideas behind the semantic web. I like the notion of table-less design, using <DIV> and <SPAN> elements everywhere to make my HTML clean and self-descriptive.
Juxtaposed against my desire to create slick CSS, though, are the desires of my employers. I'm a consultant, and my job is to get things done. The clients that I work for are businesspeople; they want their applications built quickly, and they aren't terribly interested in paying for hours of tweaking CSS to look exactly right on every browser. They want applications that are functionally complete, look good in IE 6, look acceptable in Firefox, and could look like hell in Opera, Konqueror, or whatever other browser had 0.6% of the market share last week.
That being said, while I would like to use CSS solutions to solve many of the layout problems that I face, I often find myself falling back on good-ol' tables. I just don't have the time to figure out CSS solutions to some presentation issues. As I've reflected on the layout problems that have forced me to use tables, I believe that I've boiled them down to one exercise, and I'm asking for help to solve it without tables. If you want to take a shot at it, I've included the problem here, and you can post potential solutions in the comments.
Essentially, what I want is an HTML/CSS structure that has two columns of arbitrary heights and widths. I use this structure for form entry fields and labeled multi-line values, and every time I try to put together a CSS solution, I throw my hands up in frustration and create a table. I've included here a table-based solution that displays the format that I want, and I've created a small HTML segment that is the starting point of a CSS solution.
Now, before you begin, let me point out that I'm looking for a *simple* solution. Sure, I bet you can solve this problem with thirty lines of Javascript, but why is that necessary for a basic presentation issue? Here's the problem:
[Edit 12/6] Okay, I've realized that the problem case I presented is a bit too simple. In reality, what I want is to be able to have multiple label/value sets on top of one another, with each column of labels and values vertically aligned. When I get a chance, I'll update the test. I know, I know, I'm changing the rules of the game. If you don't like it, you can write about it on your own blog :-)
Two-Column Behavior (Table Solution)
| Owner: | Owner Name 1 Owner Name 2 Owner Name 3 |
Two-Column Behavior (CSS Solution)
Owner Name 2
Owner Name 3
Rules
- Text of arbitrary length can be placed in the label, (currently "Owner:").
- Arbitrary HTML markup can be placed in the value.
- CSS solution must work across common browsers (IE 6, Firefox).
- CSS solution must not involve javascript.
Inputs
6 comments:
do float: left in both divs
the content that goes underneath your new 'table' should have the style='clear: left' which will reset the page to normal layout so you don't get any content underneath your new 'table'.
I'm fairly new at all this but I'm pretty confident that will work.
I just reread what I had posted and realized it could be slightly confusing.
Specifically you need to float: left in both your cssLabelDiv and your cssValueDiv. You then need to clear: left in your 'rules' div.
Justin, that's a good answer for most scenarios. I went ahead and edited the post to "clear: both" in the rules <div>, so now you can see the results through the tester. I'll need to look through some development that I've done, but I think this will work in some situations.
There is a problem, though, with very long text in the left-hand column. The "float: left" solution will wrap the second <div> under the first <div>, whereas the table structure will keep them side-by-side.
I need to think about situations where the CSS solution would be unacceptable, though. I think I could get it to work in a number of cases.
If anyone has other ideas, I'd still love to hear them.
I've been teaching myself web design in my spare time (which is pretty rare) and one thing I've noticed is that while tons of people are preaching for table-less CSS designs there aren't a whole lot of cases where it's actually better to not use tables.
If you are displaying tabular data you may as well go with tables. If it's for the overall page layout probably the CSS method is superior to having tables within tables.
From what I can tell though the page load time you give up for using tables is negligible unless you have a TON of tables...
Anyway, just some thoughts.
I also found a property in CSS.
display: table
display: table-row
display: table-column
these don't really work in IE though, so you'd have to put in some kind of hack.
Good points Justin. Tables are good for tabular data, of course, and they don't terribly affect performance.
Tables can affect how sites are viewed when CSS is turned off, on mobile browsers, or via screen readers, though. In these cases, you want your content first, and your navigation relegated to later in the document.
I wish that the the table values for the DISPLAY CSS property worked in IE as well, but alas, we need to wait until IE6 is obsolete.
Oh, and the more I've thought about your left-floated solution, the more I like it! Thanks!
Ok check it out:
cssLabelDiv CSS: float: left;
cssLabelDiv CSS: (nothing)
cssValueDiv CSS: float: left;
You're simply floating both DIVs next to each other, and seeing that float will not go past another floated element you're set! Need to try this on Firefox though.
Post a Comment