Word-wrap based on tag

[secretply]

So I've been doing this for a few days and still am not getting the result I want.

I have some HTML coding something similar to this:

<div>
    <div><img /><span></span></div>
    <div><img /><span></span></div>
    .
    .
    .
</div>

The problem I have is when the nested div exceeds the width of the browser, sometimes, the img tag stays on that same line but the cooresponding span tag next to it breaks off into a different line. How can I make sure that the entire nested div tag is broken off into the next line instead of breaking only certain child elements? By the way, the nested div tags have a CSS style display: inline-block; so they are placed side by side instead of different lines. I appreciate any help I can get. Thanks.

Problem: (pretend that the tags are the text itself in a web browser)

<div>
    <div><img /><span></span></div><div><img /><span></span></div><div><img /><span></span></div><div><img />
    <span></span></div>...
</div>

Solution: (take extra <div><img /> at the end of the second line in the problem code and move it to the third line)

<div>
    <div><img /><span></span></div><div><img /><span></span></div><div><img /><span></span></div>
    <div><img /><span></span></div>...
</div>

[AleMonteiro]

I really didn't understand what you're trying to do.

It's a html editor or tag highlight or something like it?

[secretply]

This is more like a positioning issue. I have a bunch of Image and Span stuff that I want together. Let's pretend the width of the container is 500px and the width of each image is 50px and span is 75px with 5px spacing inbetween.

Image(50px)Span(125px) (130px)Image(180px)Span(255px) (260px)Image(310px)Span(385px) (390px)Image(440px)

Now, if I want to put another span tag then the total width would be 515px, which exceeds the width of the container so it would be put in a different line, separate from the image. How can I make sure that when it does do that, that the image and span tags are together instead of one image tag in one line and the span tag in another line?

Note: The width of everything mentioned actually varies so I need a solution that will work with any dynamic width, not just for this example. Sorry that I wasn't clear before.

[AleMonteiro]

Just wrap the image and span into a <div>.

Then, if the div can't fit in the line it'll break to the next with the image and span inside it.

And to keep div's inline i use this css class, for browser compability:

.inline
{
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    vertical-align: top;

    *display: inline;
}

[secretply]

Oh the issue was display: inline; instead of display: inline-block;

Apparently I wrote display: inline-block; in the original message but I actually had display: inline; in my coding. How stupid of me. Thanks for the help, that resolved the issue. :D