How to use CSS in stead of tables correctly

[monique]

On the website for Wish Foundation Shamajo I regularly use tables to make up the text on pages when they contain images too. I know there are a lot of discussions on the internet going on about using tables for making up pages or not, but because of better accessibility I am now trying to make up those pages using CSS only.

But of course it should look nice too.

I created a test page where you can see both (1) using tables and (2) CSS only: http://www.shamajo.nl/hometest.htm.

As you can see, part (1) using the tables lines out text and images very well. The images are being lined out left and the text that belongs to the images is properly written next to the image. Further the arrow up ("naar boven") is lined out properly on the left and the headers (h2) properly in the center.

Now when you look at part (2) made up in CSS only, you can see that when the text is only very short, both the arrow up and the header are not anymore lined out properly left resp. center. They seem to line out taking into consideration the image size and than line out left resp. center.

This is the CSS-code I have used here:

p.imageleft img {float:left; margin: 0 1em 1em 0;}

I have tried various ways to solve this problem, but can't find any solution that works properly.

The only thing that did help is using extra <br /> at the end of the text to push the text down, but I believe it is not the correct way to do and further it is very complex too, because I'd have to check for every <p> if the text is long enough or not and how many times <br /> I'd have to add.

Does someone know how I can solve my problem?

Thanks a lot!
Monique

[boogyman]

h2 {
     text-align: center;
}
p.imageleft {
     clear: left;
     float: left;
     margin-left: 1em;
     margin-right: 1em;
}
p.imageleft img {
     float: left;
}

[monique]

Thanks a lot Boogyman!

I used your code, did some tests, made a few slight changes in make up, tried also right floating and tested with longer texts, and the result looks wonderfull (also in FF, NS and OP).

If you wish please see: http://www.shamajo.nl/hometest.htm

The final code:

p.imageleft {
     clear: left;
     float: left;
     margin-bottom:1em;
}

p.imageleft img {
     float: left;
     margin-right:1em;
}

p.imageright {
     clear: right;
     float: right;
     margin-bottom:1em;
}

p.imageright img {
     float: right;
     margin-right:1em;
}

Now I can make anything I want !!!

[monique]

Oops, I should not have been so optimistic I'm afraid.

All runs fine, untill I try to put two paragraphs <p> under one header <h2>. Than suddenly the text belonging to the image is being placed under the image and the text thereafter is being placed next to the image. And it becomes even worse when I put 3 paragraphs under one header.

See here what I mean: http://www.shamajo.nl/hometest.htm.

By the way: in FF and NS it works all fine, but also in OP it looks awful (although different from IE).

What goes wrong here?

[boogyman]

<h2>something</h2>
<p class="imageright">
         <img src="something">
         text
</p>
<p class="imageleft">
         <img src="something">
         text
</p>

h2 { text-align: center; }
p.imageright img { /* Image Right - Text Left */
     float: right;
     clear: right;
     padding-left: 1em;
     padding-bottom: 1em;
}
p.imageleft img { /* Image Left - Text Right */
     float: left;
     clear:left;
     padding-right: 1em;
     padding-bottom: 1em;
}

okay sorry about before, I havent worked with floating in this way for some time, and I didn't fully test my other example...

above is are 2 ways of floating the image. If you want the image on the right use the top and the image on the left use the bottom. take out all other instances in dealing with positioning and floating that I had before. the padding in there i will the the image some whitespace around it....

sorry and good luck.

[monique]

No need to apologize Boogyman. I hope sometime in future I know as much as you.

This looks really much better. However, still one slight problem left, although not really to be mentioned a problem (it's just because I want to be "perfect" ).

If you look at the page now (http://www.shamajo.nl/hometest.htm) sometimes - when the text of one paragraph is fairly short - the following header and text are being placed next to the image, so that they aren't lined out properly. See e.g. paragraphs Annette and Femke en Milou and Daar gaat de vloot and Wensstichting SHAMAJO maakt onmogelijk mogelijk. Sorry for the Dutch, but I am sure you will recognize the various texts.

Is there any chance to also find a solution for this (hopefully) last "issue"?

[boogyman]

p.imageright { clear:both }

or whatever the side is.. that should make sure the next paragraph clears the image as well

[monique]

This seems to work when the following paragraph has an image, but not when it has only text.

[boogyman]

okay try this then

div#tekst p {clear:both}

the reason the only one didnt work was because you have both p.imageleft and p.imageright, so you would need to do a declaration with both

[monique]

Yes, that works fine and it looks great now!

When trying this out I noticed that the next <p> was pushed down, but not the next <h2>, so I made the same for <h2>.

Many many thanks Boogyman for all your help!

Best regards,
Monique