Trouble getting content to float next to product image

HTML & CSS
1

Hello all,

I’ve been having a CSS problem for a while that I just can’t seem to figure out, and I’m hoping someone might be able to help me spot my error or of course the fix!

Some posts on my site feature products from 3rd party companies. Each product has an image and a description (description in this case means title, offering company, price, ad copy, and a link to the company’s website.)

I want the description to float next to the img, so that the image has a 20px right border, and none of the content goes any further left than that.

Any suggestions? I have been trying to apply numerous floating methods but I just can’t seem to get it to work (or maybe I’m just not finding the specific selector?)

Thanks in advance for any help - it’s greatly appreciated!

Link: http://lsunews.com/top-10-lsu-clocks

2

Thanks for the help, guys!

I realize the table-based layout is no good, but unfortunately I’m tied to it at the moment because I’m using a (WordPress) plugin to get that imported product feed. Otherwise I promise I wouldn’t have used so much BLOATED code :wink:

I’ll see if I am able to somehow add your suggested changes to the plugin so that it displays correctly. Hopefully I can get it looking good.

Really, thanks again for quick help!!

3

about a solution… you need to specify tds width: 25% + 75% = 100%. meaning that in a row, the first cell will take 25% and the second cell 75% from the total 100% available.

<DIV class=cj_list>
<TABLE style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px">
<TBODY>
<TR vAlign=top>
<TD width="25%">
<A href="http://www.anrdoezrs.net/click-4024680-10364734?url=http%3A%2F%2Fwww.footballfanatics.com%2FCOLLEGE_LSU_Tigers%2Fbrowse%2Ffeaturedproduct%2F101077%2Fpartnerid%2F2463%2Fsource%2Fcj%7E&amp;cjsku=101077" rel=nofollow><IMG src="./LSUNews.com &#187; Top 10 LSU Clocks_files/FF_101077_xl.jpg" width=110 height=110></A></TD>
<TD width="75%">
<TABLE style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px">

but you really need to switch away from tables layout. even so, you are using far more table elements than you have to. if you were a construction engineer starting a house, going at the rate you use tables upon tables, you would exhaust all materials before finishing the foundation. think of html elements like in the jungle book: “Look for the bare necessities / The simple bare necessities” :slight_smile:

4

I just woke up alright :blush:

5

As monoope says, tables shouldn’t be used here. It’s extremely ugly markup and bloated :). What you basically haveis a 2 column layout, which could be achieved much simplier’ly (lol) by floating 2 <div>'s, (widths set on each) :slight_smile:

Tables should only be used for tabular data, which this apparently isnt :).

6

oh, thanks. i see you owe me a baptism :slight_smile: