wrapping the content of a span inside an li so it stays in its own column

Question

hello, I have a list, each li in it has this structure:

<li>
  <img class="yes" src="...">
  <img class="no"  src="...">
  <span class="a">...</span>
  <span class="b">...</span>
</li>

now if the content of class b is long, it will wrap around the image. I don't want it to wrap under the image, I want it to stay in its own column. If there is anyway to do this, please let me know as using tables to do it will be just wrong. Thanks! Nima

Answer 1

You can do a couple things;

1) Add padding to the bottom of the image to take the space the span text normally would flow into. Quick and easy, but not realistic for dynamic pages.

2) Wrap a div around the spans. Then float the div right with a left margin the size of the image column. This will then create a div container that will not flow around the image.

Answer 2

Thanks Duilai,

I added the div. Here is the css that did the trick:

.divClass
{
    margin-left:30px;
    text-align:left;
}

.yes, .no
{
    float:left;
    width:15px;
}