CSS Forum

**Boar** · 01:38 PM

Hello - I am building a hybrid here, using a table as a wrapper, and I wish to list multiple products going down. Problem is that my product text ends up under the product image - how can I get it to stay to the right of the image?

I would also love to hear any comments about anything that I am doing wrong laying this out, tag use, etc. (other than using tables! I know, I know.)

If you plug this into dreamweaver you will see.

Code:

<html>
<head>
<style type="text/css">

#productwrapper{width: 658px; height 140px; border-bottom: solid 1px #017eb1; }
#fontalign { padding: 10px 10px 10px 160px;}
.thebold {font-family: Arial, Helvetica, sans-serif;font-size: 18px; color: #017eb1; font-weight: bold;}
.thetext {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}
.product { width: 100px; height: 75px; }

.homebold {font-family: Arial, Helvetica, sans-serif;font-size: 18px; color: #017eb1; font-weight: bold;}

</style>
</head>

<body>


<table width="658" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="658" height="400" valign="top">
<div id="pad">
	  <span class="homebold">Our Products </span><br />
	  <span class="hometext"></span>		</div>		
		
		
		<div id="productwrapper">
		<img src="http://www.webmaster-talk.com/images/spacer" height="75" width="100" border="0"/>
		<div id="fontalign">
	  <span class="thebold">Product 1 </span><br />
	  <span class="thetext"> Nothing affects our lifestyle quite the way product 1 does. When you&rsquo;re entertaining, make your guests feel more welcome with our Indoor lights.<br />
        Learn More About product 1</span>		
		</div>
		</div>
		
		</td>
    </tr>
  </table>


</body>
</html>

**LadynRed** · 12-14-2007, 03:51 PM

Simple solution - sort of - float the image.

**angele803** · 05:58 PM

EDIT....again

Okay, here is what I did and it seems to be working....

I removed the right padding of the fontalign div....I floated any image within the productwrapper to the left...and I told the productwrapper to clear any previously left floated elements.

Here is the code for the css:

Code:

#productwrapper{width: 658px; height 140px; border-bottom: solid 1px #017eb1; clear:left; }
#fontalign { padding: 10px;}
.thebold {font-family: Arial, Helvetica, sans-serif;font-size: 18px; color: #017eb1; font-weight: bold;}
.thetext {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}
.product { width: 100px; height: 75px; }

.homebold {font-family: Arial, Helvetica, sans-serif;font-size: 18px; color: #017eb1; font-weight: bold;}

#productwrapper img {float:left;}

**Boar** · 12-14-2007, 06:05 PM

wow, thanks angele803, that works great - hope I'm not boring you, I am new to css beyond text styling so I didnt even think to float anything!

**angele803** · 12-14-2007, 06:56 PM

No problem!

That is why we are all here...to help each other out!