Problem with float

[fodo]

I am trying to float one table to the left and one to the right within a division.
The page displays items in a catalogue withthe intention that the selected item appears to right of the catalogue items , which are thumbs.
At present the main image stays beneath the catalogue thumbs.
The page can be found at http://www.e-Books4U.net/

The mark up is

div id="gallery">
<h1 class="align-center">Web Design</h1>
<p class="picCount">Displaying 1 to 9 of 13</p>
<div>
<div class="float-divider"/>
</div>
<table class="thumbs">
<tbody>
</tbody>
</table>
<table class="main_image">
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<br/>
<br/>
<div id="footer">


The css is

#gallery{
width:850px;
border-style: solid;
border-width: 2px;
border-color: #000000;
margin: 0 auto;
background-color: #FFFFFF;

}

.picCount {
color:#00425E;
font-weight:bold;
text-align: center;
}

.thumbs table {

width:300px;
max-width: 300px;
margin-top: 10px;
margin-left: 20px;
border-style: solid;
border-width: 2px;
border-color: #000000;
}

.thumbs td {
text-align: center;
padding-left:5px;
}

.thumbs img {
border: none;
}

.thumbs a:link, .thumbs a:visited, .thumbs a:hover, .thumbs a:active {
border: none;
padding: 0;
}

.main_image table{
float: right;
text-align:center;
border-style: solid;
border-width: 2px;
border-color: #000000;
width: 350px;
}

.main_image p {
color:#00425E;
font-weight: bold;
margin: 0;
padding: 0;
}

[Snookerman]

Could you post a screen shot of the page showing which parts you mean?

[fodo]

Try this link. It shows the thumbs to the left and the main image below.
http://www.e-books4u.net/browse.php?cat_id=12

[Snookerman]

You could float the first table left. The best solution would of course be to get rid of the tables altogether and use divs, spans and lists instead.

[fodo]

I have floated the first table left.
I used tables because of the pagination feature.
How would you use lists?

[monicasaha]

i think u want to float the bottom table at the right of the left one..
i hav made a demo.. may be it help u
add this with ur css
code[
.thumbs{
float:left;
}
.spacer{
clear:both;
}

]
in html add this after the float-divider div
[
<div>
<table class="thumbs" >
<tr>
<!--This row needs to be repeated-->


<td><a href="/browse.php?image=ebay-ent-kit.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="eBay Entrepreneur" width="70" height="80" /></a></td>
<td class="thumbs">eBay Entrepreneur</td>

<td><a href="/browse.php?image=secret-ebay-m.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="Secrete ebay Marketing" width="70" height="80" /></a></td>
<td class="thumbs">Secrete ebay Marketing</td>
</tr><tr> <td><a href="/browse.php?image=ebay-extreme4.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="ebay Extreme Package" width="70" height="80" /></a></td>
<td class="thumbs">ebay Extreme Package</td>

<td><a href="/browse.php?image=eBookAuthors.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="eBook Authors Interviewed" width="70" height="80" /></a></td>

<td class="thumbs">eBook Authors Interviewed</td>

</tr><tr> <td><a href="/browse.php?image=ebook-creation-toolkit.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="eBook Creation Toolkit" width="70" height="80" /></a></td>
<td class="thumbs">eBook Creation Toolkit</td>

<td><a href="/browse.php?image=29tricks.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="29 Easy and Instant Web Design Tricks" width="70" height="80" /></a></td>
<td class="thumbs">29 Easy and Instant Web Design Tricks</td>

</tr><tr> <td><a href="/browse.php?image=boost-traffic.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="Boost Website Traffic" width="70" height="80" /></a></td>

<td class="thumbs">Boost Website Traffic</td>

<td><a href="/browse.php?image=learn_html.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="How to Build HTML" width="70" height="80" /></a></td>
<td class="thumbs">How to Build HTML</td>

</tr><tr> <td><a href="/browse.php?image=html_fast_track.jpg&amp;curPage=0&cat_id=12"><img src="images/ebay-ent-kit.jpg" alt="HTML Fastrack" width="70" height="80" /></a></td>
<td class="thumbs">HTML Fastrack</td>

<td>&nbsp;</td> </tr>

<!-- Navigation link needs to go here -->

<td>&nbsp; </td>
<td>
<a class="align-center" href="/browse.php?curPage=1& cat_id=12">Next &gt;</a> </td>
</tr>
</table>


<table class="main_image">

<tr>
<td colspan="2" class="align-center"> <a href="show_book.php?product_id=7">eBay Entrepreneur</a><br />
</td>

</tr>
<tr>


<td>
<p><img src="images/ebay-ent-kit.jpg" alt="eBay Entrepreneur" width="131" height="135" /></p>
</td>

<td>If you want to start selling on ebay this is is a must have! Discover secrets, tips and resources that will help you begin selling and making money on ebay today!</td>
</tr></table>
<br class="spacer"/>

</div>
]

[monicasaha]

i have used the same img for demo purpose, u need to change the img name.

[fodo]

Thanks. i'll try that today.

[fodo]

Hi,
Thanks I now have it working on my development site.