Positioning images with text

[minli98]

Hi,

I have multiple images (thumbnail sizes) that I'd like to display vertically with their corresponding text to their right.

Something like this:

--------
|Image1|  Text1 align2 to the top of image1
--------
--------
|Image2|  Text2 align2 to the top of image2
--------
--------
|Image3|  Text3 align2 to the top of image3
--------

I tried the following code, but the images comes out cascading instead.

<div id="container">
  <div>
    <img src="image1" align="left">
    Text1 aligns to the top of image1
  </div>
  <div>
    <img src="image2" align="left">
    Text2 aligns to the top of image2
  </div>
  <div>
    <img src="image3" align="left">
    Text3 aligns to the top of image3
  </div>
</div>

I've used <p> in place of <div>, but it doesn't help either. Any suggestion?

Many thanks.

Min

 

[Vragabond]

This works as expected on IE6 and FF.

<style type="text/css">
 #container p {
	clear: both;
 }

 #container img {
	float: left;
	margin-right: 5px;
 }
</style>


<div id="container">
  <p>
    <img src="image1" width="50" height="50" alt="image1" />
    Text1 aligns to the top of image1
  </p>
  <p>
    <img src="image2" width="150" height="50" alt="image2" />
    Text2 aligns to the top of image2
  </p>
  <p>
    <img src="image3" width="50" height="150" alt="image3"  />
    Text3 aligns to the top of image3
  </p>
</div>

 

[minli98]

Hi Vragabond,

Thanks for the answer. I tried it and it works in Firefox, but there is a bit of problem with it in IE6. Not with the format, as the layout came out as I wanted, but with the scrolling effect.

The container box is generally smaller than the content, so I created a javascript scrollbar to allow the user to scroll up and down the content box ((by varying the top property of the content). When I implemented your css code, the scrolling only affects the texts and not the images. So the images stay fix in place while the texts go up and down. Any suggestion to correct this?

I was thinking of using the good old table format if I can't do it with css.

Thank you again.

Regards,
Min

 

[Vragabond]

I wouldn't know that. You might want to ask in the javascript forum (forum216). I never tamper with the browser default scrollbars myself.

 

[minli98]

It turns out this is not a css vs. table problem. I am having problem scrolling the images in IE no matter what layout I use. I will play around a bit and if I still can't figure it out, I will head over to the js forum. Thanks Vragabond.