Need Layout Advice (CSS/spans???)

[BoulderBum]

Okay, so we have this application that currently aligns all controls according to absolute positioning.

Unfortunately, this kills accessibility, locks us into a single font size, and eliminates cross-browser compatibility.

What I'd really like to do is just create a layout that behaves like a table, but isn't a table (since we have a varying number of columns, numerous rows, etc. and we need to be able to auto-generate the layout easily and not mess with the colspan/rowspan nightmares we might face).

I've seen a method with CSS where the "rows" of a table-like structure are just divs, but here's the rub: we also have controls that span the equivalent of multiple controls in height, but the div approach means that each row must be as tall as the tallest control.

What I want is for the controls to flow around the tall controls such that the tall control, in essence, spans multiple "rows".

Is this easily accomplished with, say, CSS or spans? I'm pretty fresh with this layout stuff.

 

[mkrausnick]

It would be helpful to see an actual page - can you provide a URL? But from the description, it sounds like a table might be easier to implement. It's hard to control the positioning of floated divs in a situation like you describe.

You might be able to do something with frames, but I don't use frames much and so can't advise you on that.

Mike Krausnick
Dublin, California

 

[cLFlaVA]

maybe this will help get you started:

http://www.maxdesign.com.au/presentation/liquid/

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BoulderBum]

Thanks, but I'm still left with the initial difficulty of having an element that spans multiple rows (the given example has different-sized elements on common rows).

mkrausnick- Unfortunately the table thing won't work out very well because we have about 60 pages, all of which have "rows" with a varying columns, few of which align neatly with other columns. We also want to have a program handle the placement of elements for us, and it's difficult to have it calculate all the necessary col- and row- span information for certain elements.

 

[Vragabond]

Why don't you mock up a picture together so that we can see what you're up to.

 

[BoulderBum]

Okay, here's a sample:

http://www.clubcrosscontrols.com/layout.html

There are a number of rows with a varying number of oddly-spaced columns, and then there's a control that ends up taking multiple rows.

CSS makes it simple to have the oddly-spaced columns and separate rows, but I haven't been able to figure out how to have one control span several rows in height yet such that other controls can flow around it.

 

[Vragabond]

I can see floats. Or it seems like you have found the solution already.

 

[BoulderBum]

Nope, sure haven't (I've been working on some other part of the project in the meantime). I'll google, but do you know any good examples of floats as they relate to what I want to do?