creating a flow layout with tables

[wac]

When I code multiple small tables the browser (IE and NS6) force a break so the tables line up vertically instead of horizontally.
How can I stop the horizontal lineup from happening?
I want to basically display something like the explorer Large Icon view.

I don't want to enclose this in a larger table since that would fix the rows and columns. I want the displayed icons to be able to flow/wrap based on the page size. This is something that tables can't do.

Any ideas?

[Mr J]

One possibility...



<table border="1" style="position:absolute;left:0;top:100;border:1 solid green"><tr><td>Table 1</td></tr></table>
<table border="1" style="position:absolute;left:100;top:100;border:1 solid red"><tr><td>Table 2</td></tr></table>
<table border="1" style="position:absolute;left:200;top:100;border:1 solid blue"><tr><td>Table 3</td></tr></table>

[wac]

That's a possibility, but I also need the display to wrap when the page is not wide enough. So initially there might be 5 images/text with 3 on the first line and 2 on the 2nd, but when the user reduces the width of the page, there might be 3 rows with 2 on the first and 2nd row and 1 on the 3rd.

[cg9com]

why do you want use tables? there are other ways of accomplishing this.

[wac]

Well, that's why I'm posting here. What other way do you suggest? I cannot use active X or IE propietary methods. This has to be able to work in both NS6+ and IE5.5+

[cg9com]

Originally posted by wac
This has to be able to work in both NS6+ and IE5.5+

naturally

i was thinking just using a <span> and customizing it to look like a button, much easier than tables

for instance this would look like a form button ( i think )


<span style="background-color:#c0c0c0;color:black;border:3px outset #c0c0c0;">
button
</span>

[wac]

I don't see how I can get something like the explorer Large Icon view this way? I don't want to use buttons, rather, I'd like the icon over the text, although I could deal with the icon to the left of the text, which might make this easier to implement using span,
but I wouln't get the things nicely lined up as I could when using table.

[Vladdy]

Here is the site template I'm working on now: www.klproductions.com/TemplateT4.html - "as fluid as it gets" layout with css (and some javascript help). Works with IE5+ and Gecko browsers. Not only you can line everything up, you can create overlapping effects and have different style sheets.

[Mr J]

One possibility (part 2)
I have managed to some extent create the effect you are after by adding the width attribute and using a percentage value.

The image sizes I used were 45 x 45 pixels.

The image size attributes are not used in the img tag.

The tables are set with a row of 3 images and a row of 2 images.
Reducing the size of my window created the effect you stated.

Positioning of the tables may have an overall impact on the effect.


<table border="1" style="position:absolute;left:0;top:100;border:1 solid green;width:21%"><tr><td>
<img src="pic1.jpg"> <img src="pic2.jpg"> <img src="pic3.jpg">
<img src="pic4.jpg"> <img src="pic5.jpg">
</td></tr></table>

<table border="1" style="position:absolute;left:200;top:100;border:1 solid red;width:21%"><tr><td>
<img src="pic1.jpg"> <img src="pic2.jpg"> <img src="pic3.jpg">
<img src="pic4.jpg"> <img src="pic5.jpg">
</td></tr></table>

<table border="1" style="position:absolute;left:400;top:100;border:1 solid blue;width:21%"><tr><td>
<img src="pic1.jpg"> <img src="pic2.jpg"> <img src="pic3.jpg">
<img src="pic4.jpg"> <img src="pic5.jpg">
</td></tr></table>

[jkd]

Originally posted by Vladdy
Here is the site template I'm working on now: www.klproductions.com/TemplateT4.html - "as fluid as it gets" layout with css (and some javascript help). Works with IE5+ and Gecko browsers. Not only you can line everything up, you can create overlapping effects and have different style sheets.

Another completely fluid layout, validating to XHTML 1.1:
www.jasonkarldavis.com

Unlike Vladdy's example however (no offense intended ), every browser uses the same stylesheet (am I misreading, or does http://klproductions.com:8080/Client.../KL_Scripts.js serve up Opera its own stylesheet?)
To be fair, I serve IE an extra stylesheet, but with only one rule via a conditional comment because IE has some issues with relative font-size's that standards-compliant browsers such as Mozilla or Opera 7 don't have.

As long as you write "good" markup, use the proper tags, and have intelligent stylesheets, it is hard to make anything but a fluid layout.
Just remember to use % for width measurements, some relative unit for font sizes, and only resort to px for things such as border-width's.

[Vladdy]

jkd,

as I mentioned this site is still under construction. I'm moving the "custom stylesheet" functionality to the server side.
The reason is mostly my "scroll content div only" layout that depends on javascript for moving navigation around and fixing IE rendering of absolutely positioned elements.
When JS is disabled and/or non compliant browser is used the stylesheet that uses "scroll all the canvas" layout will be served.

The remaining code in determineStyleSheet() will be for the compliant browsers and will select stylesheet based on resolution and ultimately have random themes.

[wac]

What I'm really talking about is the flowing of the Large Icon view, as explorer does. Flowing text is not a problem. What I'm having is when I combine text and icon in a vertical format that's equally spaced (screams table to me, but I'm a novice). If I use a table, then the number of columns don't change when I expand/shrink the window. I need something like java's FlowLayout which wraps items onto the next line when they can't fit on the current line.

The effect that Mr J.s answer has in a single table is what I'm after. I'll see if I can expand on it to do what I want when there's an image and text involved.

[bk1]

here's an article/tutorial that I think explains what you're trying to do:
http://www.alistapart.com/stories/practicalcss/

[Vladdy]

In your example of "Large Icon View" the number of items in a row changes depending on container width. Something that is easily achieved with setting display property of an element to inline, but not with the "tables" layout.

[wac]

Yes! the response by BK1 is exactly what I'm looking for. I'm not wedded to tables. I'm perfectly willing to do without them. However, since I'm an HTML/CSS newbie, I didn't see a way to exist without them. I'll also look into the display:inline style that Vladdy suggested