[SOLVED] Create a div/column beside attributes and move add to cart to that column

[CLance]

I need to do a customization on product page.

 

My webpage: http://eviewtrading.com/denmall/home/8-product1.html

 

What I want to do is move the price and add-to-cart button to the empty space at the right side(beside the product attribute, not centre).

 

I guess we have to create a div or another extra column at the right side(beside the product attribute, not centre), and then move the coding of content-prices to that column. Am I correct?

But i do not know the steps of doing this. Please guide me. Thank you.

 

I solved myself.

Edited January 22, 2014 by Lance Chan (see edit history)

[NemoPS]

So you want to use the whole page? This is what you want to do right?

If so, you first have to change the center column from grid_5 to grid 9, but only on the product page, or use a css rule to target #product #center_column and make it 980px wide without any margin.

 

Then, you can expand pb-right-column (the names are inverted!), make it wider, or even add another div next to it and specify a width which fits the place. Don't forget to float this new one to the left!

[CLance]

Nemo1, this is what I wish: use all 980px for width of my page.

So, where should i change? theme -> default -> css?
Where should I add another div in product.tpl? after which line?
and how to float it to left? I am new to website design, can you guide me the steps? Thanks

 

Requirement:

http://imgur.com/VijYOB1
 

[NemoPS]

Uh, well it might be really complicated to explain. My suggestion at this point would be to read some basic html and css guides, here"

 

https://tutsplus.com/course/30-days-to-learn-html-and-css/

 

Otherwise it's virtually impossible to explain what you have to do 

[CLance]

Thanks for your suggestion, helped me a lot.

Can you please give me hint which css included? 

themes -> default -> css -> product.css ?

[NemoPS]

The Product page css is in both global.css and product.css

To know where it comes from, you can inspect the code with firebug or any other developer tool (such as chrome dev tools)

[CLance]

Thanks for your guiding. I made this!