The Best way to display Images and text

thewebkid · #1 Nov 18th, 2007, 13:08

What is the best way to display images and text next to each other. I tried to place the image and text within a <div> tag and <p> tag like this:

Code: Select all

 <div class="profiles">
<p style="float: left"><img src="image.jpg" /></p>
<p> Info info info</p>
</div>

But when I tried to create more than one, they began to show up all over the place. I even tried a blank <div> with an " " to separate them, but that didn't work.

This is for a band page for my church where I want to display each band members image to the left of there profile info. This is for a final project due soon.

Lchad · #2 Nov 18th, 2007, 14:45

Here's the best way:
html

Code: Select all

<div class="profiles"><img src="yourimage.jpg" class="image"/>
Info info info<br />
info info info
</div>
<div class="profiles"><img src="yourimage" class="image"/>
Info info info<br />
info info info
</div>

CSS:

Code: Select all

.profiles {
 width:250px;
 float: left;
 margin-right: 20px;
 font-family: 14px Arial, Helvetica, sans-serif;
 text-align: left;
 }
 
.image {
 float: left;
 margin-right: 10px;
 margin-bottom: 10px;
 }

This is just the basics but it will take two images with two write ups and place them side by side horizontally.

I hope that's what you were asking for.

thewebkid · #3 Nov 18th, 2007, 23:57

So I don't need to wrap the text in <p> tags? Ok I will do that and let you know how it turns out. Thanks for your help.

Lchad · #4 Nov 19th, 2007, 01:00

You can wrap them in p tags but you do not have.

MikeHopley · #5 Nov 19th, 2007, 09:27

Quote:

Originally Posted by Lchad

You can wrap them in p tags but you do not have.

If your text is a paragraph, then you should put it inside a <p>.

thewebkid · #6 Nov 19th, 2007, 12:06

Right, thanks!. The container's width is 800px, the left content within is 600px and the right content within is 200px. What do I do if I want each one of them to occur in a vertical alignment. Do I change the div class width? Or don't set a width at all?

Lchad · #7 Nov 19th, 2007, 12:33

Set a width of 800px on both and they will align one under the other.

thewebkid · #8 Nov 19th, 2007, 13:56

Thank you very much.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Best way to display images/ Keeping file size down	Oak	Graphics and 3D	17	May 27th, 2008 17:03
Display different images?	sing2trees	Classic ASP	6	Jan 16th, 2008 05:15
display text	elmasduro	JavaScript Forum	0	Apr 27th, 2007 04:07
Different Text Display in Different Browser ???	j4mes_bond25	Web Page Design	0	Jul 6th, 2006 17:26
Use form to display non-preset images...?	Mikemc	JavaScript Forum	2	Feb 2nd, 2006 00:03

		Webforumz.com > Main Forums > Planning Your Website > Website Planning
The Best way to display Images and text