Product Info Layout Help Please!!

[Decostyle]

My product info page is all messed up. I created a separate product_info.css so that I won't touch the core file but I need help to get it to look like the picture attached.

This is how my product info page looks like now:
http://texrag.com/store/index.php?ma...&products_id=6

This is how my css code looks like currently:

.navNextPrevWrapper {
margin-bottom:1em;
}

.navPrevCounter {
font-size:.9em;
}

.navNextPrevList {
display:inline;
white-space:nowrap;
padding:0 1em;
list-style-type:none;
position:relative;
}

#cartAdd {
width:125px;
text-align:center;
margin:10px auto;
float:right;
padding-right:10px;
}

#cartAdd input {
margin:.3em 0 0 0;
}

#productDescription {
display: block;
padding-left: 10px;
margin-top:20px;
clear:both;
}

#rightFloat {
float:left;
width:45%;
}

#leftFloat {
float:left;
text-align:center;
}

#productDetailsList {
float:left;
}

ul#productDetailsList {
}

#productAttributes {
width:100%;
float:left;
border:1px solid #bfbfbf;
padding-left:5px;
margin:5px 0 0 10px;
}

#productImage {
margin:0 auto;
text-align:center;
}

.imgLink {
text-align:center;
margin:0 auto;
display:block;
width:100%;
}

#friendReview {
width:200px;
padding:15px 0 10px 0;
float:left;
clear:left;
text-align:left;
}

.reviewCount {
float:left;
padding-left:2px;
}

#productReviewLink {
padding:5px 0;
}

.wrapperAttribsOptions {
line-height:2em;
width:auto;
float:left;
}

.wrapperAttribsOptions h4 {
padding-right:15px;
}

I'd be to happy to trade this knowledge with a certain file I have worth some amount . PM me if you are interested! :)

[dbltoe]

Let's back up just a bit.

Stylesheets are loaded alphabetically, and the last one loaded alphabetically (not physically) overrides settings in previous stylesheets.

If you set a float in product_info.css to right and the stylesheet.css has the same float with a call to go left, the latter will override the first.

Changing the product_info.css to stylesheet_product_info.css would put it after the standard stylesheet BUT, I would use the FireBug add-on to Firefox to try making the changes with the standard stylesheet before adding another.

I would also revert back to the original files for Cherry_Zen and start the process over with the stylesheet.css. You've added some and deleted some. Es no bueno Like trying to soak up Cedar Creek Reservoir with your rags.

[Decostyle]

Firebug is such a great tool! I've never tried it until now!

Ok so back to the format. I have the style.css with the product info styling commented out so it should not affect my product_info.css.

using firebug I was able to move the product description up and on the side.

I can't seem to figure out how to move the prev/next buttons below the image?

Also where do I look for why my left side box dissappeared? I didnot remove this.

[dbltoe]

See paragraph 5 of post #2