how to put img on the left, img on the right 1

[wvdba]

Hi,
i'm working on a page (html). i have to put an image1 208x149 on the left of the page and another image2 on the right.
underneath of both images i have to list the description of the image. is there anyway to accomplish this? i have used table/tr/td, but the images and descriptions shows next to each other. i like to have image1 on the very left and image2 on the very right of the page.
thanks.

 

[feherke]

Hi

Take a look at Floating an image and caption by Max Design or Image captions on Web pages by Jukka Korpela.

If you have more questions, post them in forum215 together with your current code or an URL to a publicly accessible version of the page. So far your question is not really about design.

Here in the Web site designers forum we can only say that [tt]table[/tt]-based design is deprecated.

Feherke.

http://rootshell.be/~feherke/

 

[wvdba]

thanks fhereke.
that almost worked. but my dilema is that i have two images with captions, then a text of a few paragraphs under the images. but, the text prints in between the images not below them. the page should look like this:
image1.jpg image2.jpg
caption1 caption2
paragraph containing some description of the two images.

 

[feherke]

Hi

Then use .clearfix. ( I would show you how, but you still not posted any code nor gave any URL. )

Feherke.

http://rootshell.be/~feherke/

 

[wvdba]

thanks, fhereke.
due to the nature of my work, which is confidential and it's an intranet application, i can not post a link/url. but, the pseudo image of the page that i posted is what i have. two images: one on the left, one on the right and a caption under each image. then a paragraph under both images. but now, the paragraph is showing between the two images instead of under the two images.
thanks.

 

[feherke]

Hi

Skipping the caption part :

img[purple].left[/purple] [teal]{[/teal]
  [blue]float:[/blue] [green]left[/green];
[teal]}[/teal]
img[purple].right[/purple] [teal]{[/teal]
  [blue]float:[/blue] [green]right[/green];
[teal]}[/teal]
p[purple].widepara[/purple] [teal]{[/teal]
  [blue]clear:[/blue] [green]both[/green];
[teal]}[/teal]

[b]<div>[/b]
[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"image1.jpg"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"left"[/i][/green][b]>[/b]
[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"image2.jpg"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"right"[/i][/green][b]>[/b]
[b]<p[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"widepara"[/i][/green][b]>[/b]paragraph containing some description of the two images[b]</p>[/b]
[b]</div>[/b]

Or with the previously mentioned .clearfix :

img[purple].left[/purple] [teal]{[/teal]
  [blue]float:[/blue] [green]left[/green];
[teal]}[/teal]
img[purple].right[/purple] [teal]{[/teal]
  [blue]float:[/blue] [green]right[/green];
[teal]}[/teal]
[purple].clearfix[/purple][teal]:[/teal]after [teal]{[/teal]
  [blue]content:[/blue] "[green].[/green]";
  [blue]display:[/blue] [green]block[/green];
  [blue]height:[/blue] [green]0[/green];
  [blue]clear:[/blue] [green]both[/green];
  [blue]visibility:[/blue] [green]hidden[/green];
[teal]}[/teal]

[b]<div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"clearfix"[/i][/green][b]>[/b]
[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"image1.jpg"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"left"[/i][/green][b]>[/b]
[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"image2.jpg"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"right"[/i][/green][b]>[/b]
[b]</div>[/b]
[b]<p>[/b]paragraph containing some description of the two images[b]</p>[/b]
[b]</div>[/b]

But it depends on your current code.

Feherke.

http://rootshell.be/~feherke/

 

[wvdba]

thanks, fhereke.
i'm going to try these suggestions. i'll post the result probabley with a star.
thanks a bunch.

 

[wvdba]

bingo. that was it. i used the first method. here's a star!
thanks so much.