Wrapping Blocks 1

[da644]

Hi Everyone.

I currently have the following code:

<div>
<table cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td class="itemOff">
<div class="thumbText">Image 1</div>
<div class="thumbNailView"><img src="/gallery/thumb_image_1.jpg" border="0"></div>
<div class="thumbText">
Type: Image<br>
Size: 222kb
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td class="itemOff">
<div class="thumbText">Image 2</div>
<div class="thumbNailView"><img src="/gallery/thumb_image_2.jpg" border="0"></div>
<div class="thumbText">
Type: Image<br>
Size: 300kb
</div>
</td>
</tr>
</table>

... Repeat this for however many items ...

</div>

This displays each element in its own block next to each other, but when it hits the page margin, instead of wrapping them to the next line it adds a horizonal scroll bar and continues to place them next to each other. Can any one see any way to change this so that each block appears next to the previous one until the page margin and then wrap them to the next line and carry on.

For example:

Block 1 - Block 2 - Block 3 - Block 4 | Page Margin
Block 5 - Block 6 - Block 7 - Block 8 | Page Margin

However if the window is resized small it would change automatically to:

Block 1 - Block 2 - Block 3 | Page Margin
Block 4 - Block 5 - Block 6 | Page Margin

Thanks in advance for any help.

Best Regards

Andrew.

 

[Vragabond]

Try with a more appropriate CSS solution:

  <table cellpadding="0" cellspacing="0" border="0" [b]style="float: left;"[/b]>
    <tr>
      <td class="itemOff">
        <div class="thumbText">Image 1</div>
        <div class="thumbNailView"><img src="/gallery/thumb_image_1.jpg" border="0"></div>
        <div class="thumbText">
          Type: Image<br>
          Size: 222kb
        </div>
      </td>
    </tr>
  </table>

It works for me. I would suggest putting that style into a separate class for a table though.

 

[da644]

Excellent. Thanks.