Forum Moderators: not2easy

Message Too Old, No Replies

floating div inside table cell

         

jason_m

5:05 pm on May 13, 2010 (gmt 0)

10+ Year Member



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

5:13 pm on May 13, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

5:15 pm on May 13, 2010 (gmt 0)

10+ Year Member



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

5:16 pm on May 13, 2010 (gmt 0)

10+ Year Member



thanks Fotiman i will look into that as well.

please consider this question closed.