Product Description Page Alignment Help

[nolsowski]

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

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

[nolsowski]

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

[nolsowski]

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

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

[nolsowski]

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?

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

[nolsowski]

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.