Grow your CSS skills. Land your dream job.

Best way to line up product?…

  • # November 4, 2009 at 11:35 pm

    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

    # November 6, 2009 at 4:50 pm

    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

    # November 6, 2009 at 4:56 pm

    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.

    # November 7, 2009 at 4:34 pm

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".