Product Description Page Alignment Help

[nolsowski]

I came across this site and I love how the description page is laid out. http://www.rosenberryrooms.com/386-d...g-letters.html

I would like to try and mimic it if I could. I have moved my attributes above my product description but after that I got lost. lol Here is where I am at http://frompropertorocker.com/index....oducts_id=3931

I noticed throughout there site that the right side (product name, price, attributes etc.) stay in the same spot no matter how big the product image is.

I am completely lost on how they did this. Any help would be greatly appreciated.

Thanks in advance!

[keneso]

If your images are the same size, one way of doing it could be this:

#productDescription {
color: #453F46;
margin: 220px 0 0 0;
width: 440px;
text-align: justify;
}

#productAttributes {
float: right;
width: 350px;
}

Adjust the add to bag etc. accordingly

[nolsowski]

If your images are the same size, one way of doing it could be this:

#productDescription {
color: #453F46;
margin: 220px 0 0 0;
width: 440px;
text-align: justify;
}

#productAttributes {
float: right;
width: 350px;
}

Adjust the add to bag etc. accordingly

Thanks but what if the images aren't the same? Would I still be able to achieve it or should I just give up? LOL

[nolsowski]

I am going to install Product Info Display (stacked left) and see if I can get it the way I want it.

[nolsowski]

Decided against the Product Info Display (stacked left). I wasn't getting anywhere with that either. I did however install Flexible Attributes. I hope I can at least get the attributes to display like the link above. (where the drop downs are under the text.)

[keneso]

If you float the #productAttributes right, and make the width somewhere around 200px it will force the drop downs under the headings (text)

If you don't have it, install firefox with the firebug extension, so you can check, and test on the fly.

I would keep trying moving the pieces around , and maybe add some extra div with new class/id to better control, and achieve it.

[nolsowski]

If you float the #productAttributes right, and make the width somewhere around 200px it will force the drop downs under the headings (text)

If you don't have it, install firefox with the firebug extension, so you can check, and test on the fly.

I would keep trying moving the pieces around , and maybe add some extra div with new class/id to better control, and achieve it.

Thanks! I do have the firebug extension. I just don't know a lot of the codes to get it the way I want it.

[nolsowski]

I finally got it the way I want it. Well not exactly like the other site but I am happy of how it turned out. Only trouble is I am not sure if I like where the add to bag is. http://frompropertorocker.com/index....oducts_id=3705

Does it look okay there or should I change it?

Thanks!

[keneso]

Well that's not what you "wanted" originally, the attributes on the right, but if you like it the same as is now, it's fine.

A couple of suggestions:
you could try to see if you like setting a width, and text-align here
LABEL, h4.optionName {
padding: 0.2em;
line-height: 1.5em;
widht: 250px;
text-align: right;
}

I see you are working on it, I like it better with the image on the right, as it solves the product description ul I noticed here
http://frompropertorocker.com/index....roducts_id=318

I'd try moving add to bag higher

[nolsowski]

Well that's not what you "wanted" originally, the attributes on the right, but if you like it the same as is now, it's fine.

A couple of suggestions:
you could try to see if you like setting a width, and text-align here
LABEL, h4.optionName {
padding: 0.2em;
line-height: 1.5em;
widht: 250px;
text-align: right;
}

I see you are working on it, I like it better with the image on the right, as it solves the product description ul I noticed here
http://frompropertorocker.com/index....roducts_id=318

I'd try moving add to bag higher

Yeah I did want the attributes up and to the right but I did that and then noticed that the products without attributes that area looked bare. So I added the description there instead.

I did notice that when the image was on the left then the bullet points in the description overlapped the image. So I decided to change it. I think I like where I am going with it now.

The add to bag buttons are driving me nuts. lol I did have them up further but then if the description was shorter that made by buttons come up onto the image itself. See here how it's up pretty close to the image already http://frompropertorocker.com/index....f30dc05e320b86 I was thinking of having them horizontally in a row but not sure if that would work right or even look good. I like how everything else is laid out but those darn buttons lol

I'll keep working on it to see what I can do.

Thanks for your help!