Best way to line up product?…

[WildSpirit]

I’m working on a website that when I get a "template" kindda figured out that lady I’m setting this up for wants to be able to add product herself and finish the rest of the site on her own (you’ll see that there are ALOT of pages if the navigation gives you any idea!).

Anyways, I would like at least the text under the pics to line up in a row and have two columns of product (with the corresponding text underneath).

I kindda figured out how to get two products next to each other but nothing is looking consistent… I hope this is making sense.

Is there an easy way to do this? I’m still new to HTML and CSS. Should I consider tables?… (not exactly sure how those work but seem like they might be more structural…)

Here is the page I’m working on: http://ows.wildspiritdesigns.com/index2.html

Let me know if you need more info.

Thanks,
Lyle

[dcp3450]

a quick way to get you started would be to create an id with a width half the containing area the product is in. set the div to float: left. Set an image in the div to display block. Add your image and text into the divs and it will line them up with two columns:

css:

Code:

#container { width: 500px; }

#product { width: 250px; float: left; }

#product img { display: block; position: absolute; margin: 0 auto; }

html

Code:

text text text

text text text

text text text

text text text

you could possibly use an inline <ul> too

[TheDoc]

Actually, dcp3450, if the #id of "product" is going to be more than once, it should really be a class, ".product".

Lyle, I can’t connect to the page that you provided so I can’t really comment on what you’re trying to accomplish.

[WildSpirit]

Hey thanks!! That helped. I dont think it’s going to look perfect due to the fact that a) all the images are a different size and b) the client likes the "jumbled" look….

At least its better than what her site was!!!

Thanks again!

Lyle

[Author]

Posts