Product Description Page Alignment Help

I came across this site and I love how the description page is laid out. http://www.rosenberryrooms.com/386-design-your-own-custom-wooden-hanging-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.php?main_page=product_info&cPath=156_192_222_223&products_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!

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

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

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

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

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.)

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.

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.

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.

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.php?main_page=product_info&cPath=156_192_238&products_id=3705

Does it look okay there or should I change it?

Thanks!

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.php?main_page=product_info&cPath=68_1_13&products_id=318

I'd try moving add to bag higher

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.php?main_page=product_info&cPath=68_1_13&products_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.php?main_page=product_info&cPath=157_158_161&products_id=4000&zenid=c091e419fa939f90d6f30dc05e320b86 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!

Try this:

move all the block of

<!--bof Add to Cart Box -->
code
<!--eof Add to Cart Box-->
more code
<!--eof creinold Pinterest Modifications, (You can move this anywhere you like the Pin it Button to show up on Product Info page.) -->

which includes the tell a friend, my gift list etc.

below the
<!--eof Product description -->

The red border of the div is so that you can see it better, when done remove it.

and above the
<br class="clearBoth"> (see the note below)
<!--bof Attributes Module -->

Then wrap both blocks into a div styled like this
<div style="border:1px solid #ff0000; float:left;width: 790px">
Don't forget the closing </div> after <!--eof Attributes Module -->

also remove the <br class="clearBoth"> (note below)

keneso:

Try this:

move all the block of

<!--bof Add to Cart Box -->
code
<!--eof Add to Cart Box-->
more code
<!--eof creinold Pinterest Modifications, (You can move this anywhere you like the Pin it Button to show up on Product Info page.) -->

which includes the tell a friend, my gift list etc.

below the
<!--eof Product description -->

The red border of the div is so that you can see it better, when done remove it.

and above the
<br class="clearBoth"> (see the note below)
<!--bof Attributes Module -->

Then wrap both blocks into a div styled like this
<div style="border:1px solid #ff0000; float:left;width: 790px">
Don't forget the closing </div> after <!--eof Attributes Module -->

also remove the <br class="clearBoth"> (note below)

Okay on this part:

Then wrap both blocks into a div styled like this
<div style="border:1px solid #ff0000; float:left;width: 790px">

I add that to my stylesheet under #cartAdd and #productAttributes?

I think I got it moved right in my tpl_product_info_display.php

You can either put it in the tpl_product_info_display.php as it is, or put a <div class="my_add_and_attribute_box"> and then reference that in the stylesheet like
.my_add_and_attribute_box {
border:1px solid #ff0000; float:left;width: 790px
}

In both cases you need to add the closing </div>

Of course you can name it what you want.

Also please note the red border is there for you to better see the box, and once you are satisfied you can remove it.

<div style="border:1px solid #ff0000; float:left;width: 790px">

gives all of the styling inline in your PHP file, without reference to the stylesheet. The more "proper" way would be to use something like

<div class="myAttributes">

in the PHP file, and add to your stylesheet

.myAttributes {border:1px solid #ff0000; float:left; width: 790px;}


...Like keneso said:)

keneso:

You can either put it in the tpl_product_info_display.php as it is, or put a <div class="my_add_and_attribute_box"> and then reference that in the stylesheet like
.my_add_and_attribute_box {
border:1px solid #ff0000; float:left;width: 790px
}

In both cases you need to add the closing </div>

Of course you can name it what you want.

Also please note the red border is there for you to better see the box, and once you are satisfied you can remove it.

Thanks! Did I do that right? I took the border off.

gjh42:

<div style="border:1px solid #ff0000; float:left;width: 790px">

gives all of the styling inline in your PHP file, without reference to the stylesheet. The more "proper" way would be to use something like

<div class="myAttributes">

in the PHP file, and add to your stylesheet

.myAttributes {border:1px solid #ff0000; float:left; width: 790px;}


...Like keneso said:)

Thank you! I think I got it. :)

You are on the right track.

Sorry I forgot to tell you should add float: left to your productAttributes in stylesheet.

And like said the myAttributes should start right after productDescription, and end after productAttributes.

keneso:

You are on the right track.

Sorry I forgot to tell you should add float: left to your productAttributes in stylesheet.

And like said the myAttributes should start right after productDescription, and end after productAttributes.

Okay I think I got it. This stuff can be confusing sometimes. lol

Is that how it's supposed to look?

Yes, now it's almost done, add the
float: left;
to your #productAttributes in the stylesheet

#productAttributes {
background: none repeat scroll 0 0 #E4E3CC;
border: 1px solid #F3ECD9;
float: left;
padding: 10px 14px;
}

Then tweak all to your likes, don't forget the pinit button, which is overlapping the socials.

keneso:

Yes, now it's almost done, add the
float: left;
to your #productAttributes in the stylesheet

#productAttributes {
background: none repeat scroll 0 0 #E4E3CC;
border: 1px solid #F3ECD9;
float: left;
padding: 10px 14px;
}

Then tweak all to your likes, don't forget the pinit button, which is overlapping the socials.

I did change that before. Idk why it's not moving to the left.