Re-Arranging divs on product page

[theograd]

Hello all.

I’m looking to re-arrange the divs on my product page’s info. box at: http://rsatestamls.kaliocommerce.com/leonard-soil-knife/p/4752/

What I’m trying to do is:

Have the Item # in the upper left hand corner. Stock status (In Stock) in the upper right hand corner.

Then, underneath the Item #, I’ll have the Price Breaks (1-5, 6+). The breaks themselves will be underneath eachother. Then, the pricing to the right.

The lower left hand corner will have the “Qty” and the Right hand corner will have “Add to Cart”.

Anyways, I’m running into some trouble with the Stock Status. I just cannot find a way to get it to go in that upper right hand corner. Any ideas?

Also, if you have any tips on the other elements, I’d love to hear them.

Thank you.

[noahgelman]

#ItemNumber { float:left;}
#stockStatus { float:right}
#PriceBreak { clear:both;} /* Remove display:inline-block */

You can do it like that with floats or you can use position absolute

#StandardProductBox { position:relative; }
#StockStatus { position:absolute; top:0; right:0; } /* Adjusting 'top' and 'right' values you can move it around */

[theograd]

Awesome, that worked!

Quick follow up, if you don’t mind –

http://rsatestamls.kaliocommerce.com/felco-pruner-original-model-2/p/2FEL/

If I have a quantity with double digits instead of single digits, everything shifts in a negative way. I want to keep everything lined up nicely. Any ideas on doing that?

I’m terrible with CSS & front-end, more of a Developer than anything.

Edit

Good lord, and products with 3 digits are a nightmare O_O
http://rsatestamls.kaliocommerce.com/product.aspx?p=NPT1

[Tom Houy]

The Quantity box looks fine on my end in Chrome on Win 7 (x64) when I enter 2 or 3 characters in it. Did you change something since you change something since you last posted this?

[theograd]

Tom,

Not the box, the special pricing Price Breaks. For instance: http://rsatestamls.kaliocommerce.com/product.aspx?p=NPT1

I’m looking for a way to make them behave. At least have the @’s and decimals on the prices line up, regardless of the size of the price breaks & actual prices.

I apologize for not being clear enough. My bad.

[Tom Houy]

I see. You would probably want to align them all to the right then, since the characters to the right are going to be more constant I would assume, until you start getting into the double/triple digits for the dollar amounts.

Right now it looks like you are using two ID’s for the three prices listed in that example. There are two using the ID of “PriceBreak” and the last one is using the ID of “AddPriceBreaks”. If you set the Text-Align property to Right for both, that should move them all to the right. In other words, the CSS would look something like this:

#PriceBreak {
      text-align: right;
}

#AddPriceBreaks {
      text-align: right;
}

If that’s not working, they might be inheriting their alignment from another CSS property, in which case you can try and overide that by using this instead:

#PriceBreak {
     text-align: right !important;
}

#AddPriceBreaks {
     text-align: right !important;
}

If you wanted it to be a little more flexible in dealing with larger dollar amounts, you might want to consider wrapping the prices in their own DIV or SPAN tags, and the Quantity & @ symbol in their own DIV/SPAN, then setting the widths and alignment separately for both.

[Author]

Posts