CSS float with dynamic content

March 4, 2007 10:01 AM

Dynamic content in the Savings Account table on this page refuses to wrap, and forces the Interest Accounts table beyond the horizontal bounds of the page at 800*600 resolution. Request a resolution-independent solution that does not rely on an encasing table. Further caveats within.

Development platform is Mozilla Firefox 2.0.0.2, and JavaScript code does not yet function in Internet Explorer 7... but that's O.K. with me. This is a hobbyist's site, after all.

onmouseover/out is admittedly annoying, and used only for testing the layout; final version will use onclick.

Containing div for Savings Accounts table prevents the caption background-color from bleeding to the right, beyond the bounds of the table.

Resolution-independent means no artificial constraints on the maximum width of the Savings Account table.

Solution should preferably not use JavaScript; if I'm forced to hack my way through this, I'll do it the tabular way.

I'm still a bit of a newbie at HTML/CSS design, so responders are encouraged to examine the assumptions underlying my question as well.

posted by The Confessor to computers & internet (6 comments total)

What if you float each table left?
posted by smackfu at 10:13 AM on March 4, 2007

Doesn't help, even when the Available Savings vs. Goals comparison is clear: left-ed to force it off the side of the Interest Accounts table.
posted by The Confessor at 10:25 AM on March 4, 2007

You doing two contradictory things. You don't want to limit the width, but you want it to wrap.

Personally, I'd force it to a certain size. It's nicer aesthetically and easier practically.

But if you really really want to do both, this is the direction I'd go in:

1. On action, determine the width of the page with JS.
2. Determine how much white space you have. (calculate the widths of both divs, and subtract from width of page) Set to x.
3. Tell the div to get x pixels wider.

But that's messy. Save yourself time and fix the width. I have rarely found examples of "resolution independence" being any more than an ideal that stubbornly refuses to die, and makes the page harder to read and assign muscle memory to.
posted by jragon at 10:32 AM on March 4, 2007

Tables without defined width are going to expand to available width.

You don't want resolution independence, you want window width independence. That's exactly what you've got right now, but you don't like it. So you have to do either of two things: Force the width of the table, or deal with what you have.

A reasonable compromise is to set something like <table style="minwidth:50%;maxwidth:60%;"> -- you may still get the twitchiness you see now but the table will at least be constrained according to the box containing it (which you have set to the width of the window by default).
posted by ardgedee at 10:45 AM on March 4, 2007

As ardgeedee mentions, percentage widths are your best bet here. You get proportional constraints without fussing over precise pixel layouts. To add something besides "yes, do that", I suggest a quick visit to Liquid Layouts, where you can steep yourself in good flowing design. Good luck!
posted by boo_radley at 11:33 AM on March 4, 2007

Thanks for the input, everyone; went with the table as it seems to be the simplest and best current aesthetic option, at least until the CSS3 standard is finalized and implemented.
posted by The Confessor at 1:16 PM on March 4, 2007