floating div inside table cell

[jason_m]

hello,

basically i would like to have the option in my blog posts to have captioned images hovering to the right or left in a post (existing within the table cell, a cell representing the body of the post).

the table is stylized and posted using php/mysql loop.

i tried the following:

<th colspan="4" align="left">
<p style="color:#585858">aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a 
<div class="floatright">
abc def
</div>
aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a 
</p>
</tr>

code appears in one line in production source broken up for readability.

where floatright:

div.floatright
{
width:25px;
height:25px;
float: right;
display:block;
margin: 5px 5px 5px 5px;
border:1px solid #000000;
}

it is appearing as
aaaa aa.....
abc def
aaa aa aaa....

*border is also not appearing

[Fotiman]

Some things to note.
1. A <p> element can not have a <div> element nested within it. Therefore, the browser will implicitly close the first paragraph, so you'll end up with something like this:

<p>aaa aaa ...</p>
<div class="floatright">...</div>
<p>aaa aaa ...</p>

Note sure if that's really what you're intending to do, as this will technically be 3 elements (vs. 2).

2. I would try using Firefox/Firebug to inspect the div and see what styles are being applied. It's possible that something with greater specificity is overwriting your style.

[jason_m]

that was dumb

<th colspan="4" align="left"> 
<p style="color:#585858">aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a 
<div class="floatright"> 
abc def 
</div> 
aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a aaa aaa aa a 
</p> 
[b]</th>[/b]
</tr> 

[jason_m]

thanks Fotiman i will look into that as well.

please consider this question closed.