Layout: Text next to picture (CSS)

started by Schomer on Nov 15, 2004 — RSS Feed

Schomer Schomer
Posts: 24

I'd like to locate text next to a picture on my page. Should I be using relative positioning, pushing it to the right with a "left" value and using a negative "top" position? Or is there a better way to do this?

Here is what I am doing on the page:

---------
| picture |  Text Description of Picture
---------

---------
| picture |  Text Description of Picture
---------

---------
| picture |  Text Description of Picture
---------

Baxter Baxter
Posts: 157

img {float:left;clear:left}

Schomer Schomer
Posts: 24

Thanks Baxter,

That worked just fine. But then I realized I wanted to put each item inside another box. So I put a left float and clear on the container box, which contains an image and text, then I floated the image inside the box to the left, so the text would appear to the right of it.

What happens now, is the text is lined up with the bottom of the containing box, instead of up next to the top-right corner of the image, like it used to before it was in a box.

Any ideas?

I keep repeating to myself "no tables, no tables, no tables..."

Stan Stan
Posts: 44

I think you're using too many containers. Table based lay out often gives you more control when you increase complexity by adding cells and nesting tables, etc. My limited experience with CSS indicates it is the opposite. Start simple and use nested DIVs and such only if you need to.

You must login to reply