Problem with float
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;
}
CSS Codes
Reply With Quote
Bookmarks