Probably dumb HTML tables question

[j]

Hopefully someone can help me out with this... We added another affiliate in SW&D as you can see and since each of the affiliates has a thread link under their mini banner, they have to be in separate table cells. Adding one more meant that a single row would break the layout and start to look ugly on most screens. While the banners at the top will wrap, because they aren't in table cells, the ones in SW don't want to.

At the moment I just put half into a new row. But I'd rather have it so that if someone's browser is wide enough, they go in one row, and if not, they wrap to another row. Possibly have five in one table and five in another, and if the browser is too narrow, the second table wraps to another row. Follow? If that's too difficult, just have the ones on the end wrap to a new row.

How do I do this? I've tried putting each banner/etc into its own table all of which are in the same <td> tag, hoping they might wrap, but then they all wrap and they come out as a single column one banner wide.

Ideas?

 

[j]

I just tried adding style="display: inline;" to each of the tables, which puts them all in one line, but there again, they won't wrap.

The answer is probably on this page:

http://www.w3.org/TR/REC-CSS2/visure...ropdef-display

But I have no idea what most of this means.

 

[m_wave]

You could just make each of the banner / links their own 2 row table...

 

[robin]

Try this: In each td cell, apply the style "float: left;".

Example
Code:

<table align="center">
<tr>
<td style="float: left;">
test\t
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
</tr>
</table>​

I've only tried that in Firefox though.

 

[j]

Originally Posted by m_wave

You could just make each of the banner / links their own 2 row table...

I tried that, see above...

Originally Posted by robin

Try this: In each td cell, apply the style "float: left;".

Example
Code:

<table align="center">
<tr>
<td style="float: left;">
test\t
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
<td style="float: left;">
test
</td>
</tr>
</table>​

I've only tried that in Firefox though.


Hmm, nope, they don't wrap. Could it be something to do with the table they're in? Does a property need to be set so it can't fight the surrounding table's borders?

 

[robin]

Originally Posted by j

I tried that, see above...

Hmm, nope, they don't wrap. Could it be something to do with the table they're in? Does a property need to be set so it can't fight the surrounding table's borders?
I guess that only worked in Firefox.

Putting each cell into its own table in one big td cell might also work. I just tried this in both browsers:

Code:

<table style="float: left;">
<tr>
<td>
test
</td>
</tr>
</table>

<table style="float: left;">
<tr>
<td>
test
</td>
</tr>
</table>
​

Alternatively, you could just copy whatever you did for the top affiliate banner.

 

[j]

Well the top one wraps because they aren't in cells, but to have the affiliate link below each one, I think I need to have them in cells... right? If there's a different way I'd do it.