I'm having a problem with an image within my table row. For some reason, the background color will not extend and fill the table row in when I have a picture floating to the left.
p.more {color: rgb(255, 255, 255);font-family: Arial;font-size: 18px;line-height: 140%;margin: 0px;text-align: center;background-color: #cccccc;}img.more {float: left !important;margin: 0px 15px 15px 0px;width: 330px;}span.more {line-height: 100%;text-align: center;font-size: 18px;}span.moreweelove {color: rgb(255, 255, 255);}<table><tr><td><p class="more"><a href="http://blog.weespring.com/weelove-littlehipsqueaks-knotted-headbands/"><img class="more" src="http://www.weespring.com/media/weelove_littlehipsqueeks.jpg"></a><br><span class="more"><span class="moreweelove"><strong>Modern, Comfy, and Fun Staples</strong></span></span></p><p class="readmore"><strong class="subheading">BIG LOVE FOR JUNE & JANUARY</strong><br><br><a href="http://blog.weespring.com/weelove-littlehipsqueaks-knotted-headbands/"><img src="http://www.weespring.com/media/read-more.png"></a><br><br></p></td></tr></table>Best Answer
If want to fullfill an entire row with a background-color, youu should apply a css style to the corresponding < tr > tag.
Since you applied the background color the <p>, only the <p> itself will get colored. If the last line doesn't take up the full width of the container, e.g.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxthen only the parts with the x will get the background treatment. But if you apply the color to the containing <td>, which surrounds the paragraph, like so:
+------------------------+|xxxxxxxxxxxxxxxxxxxxxxxx||xxxxxxxxxxxxxxxxxxxxxxxx||xxxxxxxxxxxxx |+------------------------+Then that final partial line will ALSO be colored, because the entire box of the <td> is colored, not just where the text is.
It's because you're giving style to "p.more" not to the table. Try giving the background color to the table.