• Hi, I'm the owner and main administrator of Styleforum. If you find the forum useful and fun, please help support it by buying through the posted links on the forum. Our main, very popular sales thread, where the latest and best sales are listed, are posted HERE

    Purchases made through some of our links earn a commission for the forum and allow us to do the work of maintaining and improving it. Finally, thanks for being a part of this community. We realize that there are many choices today on the internet, and we have all of you to thank for making Styleforum the foremost destination for discussions of menswear and fashion.
  • STYLE. COMMUNITY. GREAT CLOTHING.

    Bored of counting likes on social networks? At Styleforum, you’ll find rousing discussions that go beyond strings of emojis.

    Click Here to join Styleforum's thousands of style enthusiasts today!

Probably dumb HTML tables question

j

(stands for Jerk)
Admin
Spamminator Moderator
Joined
Feb 17, 2002
Messages
14,912
Reaction score
102
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

(stands for Jerk)
Admin
Spamminator Moderator
Joined
Feb 17, 2002
Messages
14,912
Reaction score
102
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

Senior Member
Joined
May 2, 2007
Messages
298
Reaction score
0
You could just make each of the banner / links their own 2 row table...
 

robin

Stylish Dinosaur
Joined
Dec 5, 2006
Messages
12,416
Reaction score
156
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

(stands for Jerk)
Admin
Spamminator Moderator
Joined
Feb 17, 2002
Messages
14,912
Reaction score
102
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

Stylish Dinosaur
Joined
Dec 5, 2006
Messages
12,416
Reaction score
156
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

(stands for Jerk)
Admin
Spamminator Moderator
Joined
Feb 17, 2002
Messages
14,912
Reaction score
102
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.
 

Styleforum is proudly sponsored by

Featured Sponsor

What Is The Best Value Shoe Brand For Money?

  • Meermin

    Votes: 37 14.8%
  • TLB Mallorca

    Votes: 41 16.4%
  • Cheaney

    Votes: 9 3.6%
  • Carmina

    Votes: 40 16.0%
  • Crockett & Jones

    Votes: 44 17.6%
  • Other

    Votes: 79 31.6%

Related Threads

Forum statistics

Threads
457,249
Messages
9,911,903
Members
206,610
Latest member
nakaruntkesm
Top