Text - Image - Text

[DaSilva]

I want to realize the following:

This is | IMAGE | This is
a text | IMAGE | a text
on the | IMAGE | on the
left side | IMAGE | right side

How can I do this? I have tried it with the following CSS but it doesn't work:

#content #contentleft {
	width: 375;
	float: left;
}
#content #contentright {
	width: 375;
	float: right;
	text-align: left;
}
#content img.center {
	float: center;
	margin: 0 0 8px 8px;
}

Thanks in advance.

[Fang]

That is normal layout

<p>This is <img> This is</p>

There must be more specific requirements.

[DaSilva]

No, the text on the left side must be independed from the text on the right side. It should be two columns with an image between them exactly like in the picture (attachment).
Thanks

[opifex]

The example in this thread is the reverse... image - text - image.
You can easily adapt it to what you want... inside one paragraph.

Originally Posted by opifex

<span> is a very useful and versatile element!

oh.... "float:center"??? ...none, left or right are your options.

[Fang]

http://www.alistapart.com/d/crosscolumn/example4.html

[DaSilva]

Thanks, but it seems to be to complicated because I don't want to set the line break for the image manually. Isn't it possible without extra classes?
I now have used http://www.basictips.com/text-betwee...t-tables.shtml and switched the text with the image but then the image has its own column and the text doesn't wrap completely around it...

[Fang]

There is no simple solution to this layout. When css3 becomes mainstream it should become easier.

[DaSilva]

I have the problem that Firefox displays everything correct but Internet Explorer or Google Chrome don't. You can try it by yourself on http://www.reisenachoz.de/v2/about.php .
The CSS looks like this:

.floatleft {
  float: left;
  margin-right: 5px;
  width: 353px;
}
.floatright {
  float: right;
  margin-left: 5px;
  width: 353px;
}
p {
  margin: 0;
  padding: 0.4em 0;
  color: #FFFFFF;
  line-height: 1.4em;
  text-align: justify;
}

The important part looks like this:

        <p> <span class="floatleft">This is the text on the left side.
            </span>
            <img src="images/about.png">
            <span class="floatright">This is the text on the right side.
            </span>
        </p>

As I said before I have used this tutorial.

[opifex]

clear the floats.... check the referenced post for the example.

clear:both;

It's sometimes helpful to load the two floated elements in order...

<p> 
    <span class="floatleft">This is the text on the left side. </span>
    <span class="floatright">This is the text on the right side. </span>
    <img src="images/about.png" alt="alt text"/>
</p>

Since you are using xhtml, remember to close your image tag.