I need advice on how to go about structuring a layout using CSS for text & images in the “Content” box. I have mostly text with 5 images that need to be displayed at specific points in the text on this page.


Am assuming I would need to use div boxes to contain the text & images in different groups to keep the images and text spaced properly, which sounds similar to the table method I used in the past.


What is a good method for doing this with CSS that maintains the W3C standards, etc.

There's probably going to be more than one solution. How I would set it up would depend on the layout and where you specifically want the images to be located in relation to the text. I'm not sure anyone can give you a good answer without a better idea of the layout.

Do you have an image showing what you're after or even a table based layout that's set up so we can see?

It can defintiely be done, but hard to know how without seeing what you're after.

Here is a hyper-link to my table-based page with the text & images.
My Page

Strictly speaking about the text/image positioning in the content section, I would just do something like this in the stylesheet:

.imgleft { float: left; margin-right: 20px; }
.imgright { float: right; margin-left: 20px; }

Then, in the actual content html:

<img src="img1.jpg" class="imgleft" />
<p>blah blah blah</p>

<img src="img2.jpg" class="imgright" />
<p>more blah blah</p>

Oh, and to make sure each paragraph is on its own line, and images don't drop into the next paragraph...

.clear { clear: both; }

<img src="img1.jpg" class="imgleft" />
<p>blah blah blah</p>

<div class="clear"></div>

<img src="img2.jpg" class="imgright" />
<p>more blah blah</p>

TechWench, you took the words - and code - right out of my mouth.. GMTA
That is exactly the method I use for my sites and it works perfectly.

Ok, so just float the images either to the left or right, then add a .clear class to keep the paragraphs separate from the underlying images.

That will help me get it going.

thanks! techwrench