Formatting Wordpress E-Commerce Website Products Page

I inherited a wordpress e-commerce website from a developer that only half finished the project. I do not know alot about css or php, but I have been able to play around with the coding enough to almost finish the products page. I am having trouble formatting the products page however, the products listing is too wide and is showing below my sidebar instead of next to it. Below is a picture of the page looking OK for product categories, but then incorrectly when it lists the products.

I have played around with the wpsc-default.css file to resolve this simple issue, but the changes I make do not seem to be having any effect with the product list row taking up the whole content area. I tried to change the product display container, from 100% width, but when i updated the file the website still looked the exact same. Below is the code for that file, can someone please point out what I am missing?

        /*
Theme Name: Default Theme
Theme URI: http://instinct.co.nz
Description: Default Theme
Version: 3.5
Author: Roy Ho
Author URI: http://instinct.co.nz
*/

/*
 * If you delete this file, you can expect your WP e-Commerce installation to break in some manner
 * to create your own theme copy, and paste this file, change the names and alter to your tastes
*/
/*-----UTILITY-----*/
.group:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
/*-----IE SPECIFIC STYLESHEET-----*/

/*-----UTILITY-----*/
/* for IE6 */
* html .group {
    height:1%;
}

/* for IE7 */
*:first-childhtml .group {
    min-height:1px;
}

/*-----GENERAL-----*/

#default_products_page_container .imagecol img, #list_view_products_page_container img, #grid_view_products_page_container img {
    margin:0;
    padding:0;
    border:1px solid #ccc;
}

.wpsc_hidden{
    display:none;
}

/*-----DEFAULT PRODUCT DISPLAY-----*/
#default_products_page_container {
    width:100%; 
    position:relative;
    line-height:1.2em;
}

#default_products_page_container .wpsc_page_numbers_top {
    margin-bottom:20px; 
}

#default_products_page_container .wpsc_page_numbers_bottom {
    margin-top:20px;    
}

.wpsc_category_grid_item {
    text-align: center;
    background: #EFEFEF;
    border: 1px solid #CCC;
    margin:10px;
    text-decoration: none;
}

.wpsc_category_grid_item .item_no_image {
    color:#000;
}


#default_products_page_container .wpsc_page_numbers_top a:link, #default_products_page_container .wpsc_page_numbers_top a:visited, #default_products_page_container .wpsc_page_numbers_bottom a:link, #default_products_page_container .wpsc_page_numbers_bottom a:visited {
    padding:5px 4px;

}


#default_products_page_container .wpsc_page_numbers_top a:hover, #default_products_page_container .wpsc_page_numbers_top a:active, #default_products_page_container .wpsc_page_numbers_bottom a:hover, #default_products_page_container .wpsc_page_numbers_bottom a:active {

}

#default_products_page_container .wpsc_page_numbers_top span.current, #default_products_page_container .wpsc_page_numbers_top span.current, #default_products_page_container .wpsc_page_numbers_bottom span.current, #default_products_page_container .wpsc_page_numbers_bottom span.current {
    padding:5px 4px;
}

.default_product_display {
    margin-bottom:20px;
    padding:10px;
    position:relative;
}

.default_product_display .imagecol {

    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;

}

.default_product_display .imagecol img.product_image {
    background-color:#efefef;   
}

.default_product_display .imagecol img.no-image, #content .default_product_display .imagecol img.no-image {
    background-color:#EFEFEF;
    display:block;
}

.default_product_display .productcol {
    vertical-align: middle;
    min-height: 50px;
}

.default_product_display h2.prodtitle, #content .default_product_display h2.prodtitle {
    margin:0 0 5px 0;
    line-height:1;
    clear:none;
}

.default_product_display span.sale {
    position:absolute;
    top:-10px;
    left:-10px;
    text-indent:-9999px;
    display:block;
}

.default_product_display .wpsc_description, #content .default_product_display .wpsc_description {
    font-size:13px; 
    line-height:1.4em;
}

.default_product_display .additional_description, #content .default_product_display .additional_description {
    font-size:13px; 
    line-height:1.4em;
    margin:0;
}

.default_product_display .additional_description_container {
    margin:20px 0;  
}

.default_product_display a.additional_description_link:link, .default_product_display a.additional_description_link:visited {
    text-decoration:underline;
    color:#0062ce;
    margin-left:5px;
}

.default_product_display a.additional_description_link:hover, .default_product_display a.additional_description_link:active {
    text-decoration:none;
}

.default_product_display .additional_description {
    display:none;   
}

.default_product_display form.product_form fieldset, #content .default_product_display form.product_form fieldset {
    border: none;
    padding: 0px;
}

.default_product_display form.product_form fieldset legend, #content .default_product_display form.product_form fieldset legend {
    font-size:18px;
    font-weight: normal;
    padding:0px;
}

.default_product_display .wpsc_variation_forms {
    padding:2px;    
    margin-bottom:10px;
}

.wpsc_select_variation{
    position:relative;
}

.default_product_display .wpsc_variation_forms table, #content .default_product_display .wpsc_variation_forms table, .default_product_display .wpsc_variation_forms table tr, #content .default_product_display .wpsc_variation_forms table tr, .default_product_display .wpsc_variation_forms table td, #content .default_product_display .wpsc_variation_forms table td {
    border:none;
    border-collapse:collapse;   
    margin:0;
}

.default_product_display .wpsc_variation_forms table td.col1, #content .default_product_display .wpsc_variation_forms table tr td.col1 {
    width:10%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.default_product_display .wpsc_variation_forms table td.col2, #content .default_product_display .wpsc_variation_forms table tr td.col2 {
    width:80%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.default_product_display .wpsc_variation_forms label {
    font-family: Georgia, "Bitstream Charter", serif;
    font-size:14px;
    color:#000
}

.default_product_display .wpsc_variation_forms select {
    margin:0;
    min-width:100px;
    max-width:200px;
}

.default_product_display .wpsc_quantity_update {
    margin-bottom:10px;
    padding-bottom:10px;
    margin-left:10px;
}

.default_product_display .wpsc_quantity_update input, #content .default_product_display .wpsc_quantity_update input {
    margin:0;
    line-height:1.2em;
    font-size:12px;
}


.default_product_display .wpsc_quantity_update label, #content .default_product_display .wpsc_quantity_update label {
    font-family: Georgia, "Bitstream Charter", serif;
    margin:0;
    line-height:1.2em;
    font-size:12px;
    color:#F60;
}

.default_product_display .wpsc_product_price {
    margin-bottom:10px;
    font-size:16px;
    padding:5px;
    display:inline;
    *zoom:1;
}

.default_product_display .in_stock,
.single_product_display .in_stock {
    position: relative;
    background-image: url(wpsc-images/yes_stock.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    left:-5px;
}

.default_product_display .out_of_stock,
.single_product_display .out_of_stock {
    position: relative;
    background-image: url(wpsc-images/outofstock.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    left:-5px;
}


.default_product_display .wpsc_product_price p, #content .default_product_display .wpsc_product_price p {
    margin:0;
}

.default_product_display .wpsc_product_price span.oldprice {
    text-decoration:line-through;
    color:#666;
}

.default_product_display p.soldout, #content .default_product_display p.soldout {
    font-weight:bold;
    font-size:14px;
    color:#C33; 
    background:url(wpsc-images/outofstock.png) no-repeat scroll 0 2px transparent;
    padding-left:18px;
    margin:0;
}

.default_product_display div.wpsc_loading_animation {
    visibility:hidden;  
    margin-top:5px;
}

.default_product_display div.wpsc_loading_animation img, #content .default_product_display div.wpsc_loading_animation img {
    border:none;
}

.default_product_display .product_footer .product_average_vote strong  {
    font-size:0.8em;    
    float:left;
}

.default_product_display .product_footer .product_average_vote span  {
    font-size:0.8em;    
    float:left;
}

.default_product_display .product_footer .product_user_vote {
    clear:both;
    font-size:0.8em;    
    float:left;
}

.default_product_display .wpcart_gallery img, #content .default_product_display .wpcart_gallery img {
    margin-right:6px;
    border:1px solid #ccc;  
}

.wpcart_gallery .attachment-gold-thumbnails, .imagecol .product_image{
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
}


.single_product_display form.product_form .wpsc_buy_button_container,
#content .single_product_display form.product_form .wpsc_buy_button_container{
    text-align: right;
}

.default_product_display .wpsc_buy_button_container{
    float:right;
}

/*-----LIST VIEW PRODUCT DISPLAY-----*/
#list_view_products_page_container {
/*  width:250px;     */
    position:relative;
}

#list_view_products_page_container .wpsc_page_numbers_top {
    margin-bottom:20px; 
}

#list_view_products_page_container .wpsc_page_numbers_bottom {
    margin-top:10px;    
}

#list_view_products_page_container p, #content #list_view_products_page_container p {
    line-height:1.2em;
    margin:0;
    padding:0;  
}

#list_view_products_page_container span.sale {
    display:none;
}


#list_view_products_page_container input, #content #list_view_products_page_container input, #list_view_products_page_container textarea, #content #list_view_products_page_container textarea {
    margin:0;
    padding:0;
}

table.list_productdisplay form.product_form {
    display:inline;
}

table.list_productdisplay .quantity_container {
    display:inline; 
}

#content input.wpsc_buy_button{
    font-size: 12px;
}

table.list_productdisplay .wpsc_buy_button_container {
    display:inline-block;
    position:relative;
}

table.list_productdisplay .wpsc_buy_button_container .wpsc_loading_animation {
    position:absolute;
    top:1px;
    right:-85px;
    *right:-100px;
    font-size:10px;
    width:100%; 
    vertical-align:middle;
    line-height:1.2em;
}

table.list_productdisplay .wpsc_buy_button_container .wpsc_loading_animation img, #content table.list_productdisplay .wpsc_buy_button_container .wpsc_loading_animation img {
    vertical-align:middle;
    border:none;
    float:left;
}

table.list_productdisplay .oldprice {
    text-decoration:line-through;
}

#list_view_products_page_container table.list_productdisplay input.wpsc_buy_button, #content #list_view_products_page_container table.list_productdisplay input.wpsc_buy_button {
    padding:5px;

}

table.list_productdisplay h2.prodtitle, #content table.list_productdisplay h2.prodtitle {
    font-size:15px;
    line-height:1.2em;
    margin:0;
    word-wrap: break-word;  
}

table.list_productdisplay h2.prodtitle a:link, #content table.list_productdisplay h2.prodtitle a:link, table.list_productdisplay h2.prodtitle a:visited, #content table.list_productdisplay h2.prodtitle a:visited {
    text-decoration:underline;
    color:#006699;
}

table.list_productdisplay h2.prodtitle a:hover, #content table.list_productdisplay h2.prodtitle a:hover, table.list_productdisplay h2.prodtitle a:active, #content table.list_productdisplay h2.prodtitle a:active {
    text-decoration:none;
}

table.list_productdisplay td.stock {
    text-align:center;  
}

table.list_productdisplay tr.alt {
    background-color:#F8F8F8;   
}

table.list_productdisplay p.soldout {
    color:#C33; 
}

/*-----SINGLE PRODUCTS PAGE-----*/
#single_product_page_container {
    width:650px;    
    position:relative;  
}

.single_product_display {
    margin-bottom:20px;
    padding:10px;
    position:relative;  
}

.imagecol {
    margin-right:5px;
/*  width:25%; */
    float:left; 
    position:relative;
}

.single_product_display .imagecol img.product_image {
    background-color:#efefef;
    border:1px solid #ccc;  
}

.single_product_display .imagecol img.no-image, #content .single_product_display .imagecol img.no-image {
    background-color:#EFEFEF;
    display:block;
}


.single_product_display .product_description, .single_product_display .single_additional_description {
    font-size:14px;
    line-height:1.2em;
    margin:0 0 10px 0;
    padding:0;  
}

.single_product_display form.product_form fieldset, #content .single_product_display form.product_form fieldset {
    border: none;
    padding: 0px;
}

.single_product_display form.product_form fieldset legend, #content .single_product_display form.product_form fieldset legend {
    font-size: 18px;
    font-weight: normal;
    padding: 0px;
}

.single_product_display form.product_form input, #content .single_product_display form.product_form input {
    padding:2px;
    margin:0;

    line-height:1.2em;
    font-size:14px;
}

.single_product_display form.product_form input.input_custom_text, #content .single_product_display form.product_form input.input_custom_text {
    width:250px;
}

.single_product_display form.product_form fieldset p, #content .single_product_display form.product_form fieldset p {
    margin:0 0 10px 0;
    padding:0;
    line-height:1.2em;
    font-size:14px; 
}

.default_product_display .wpsc_variation_forms {
    padding:2px 0px 2px 0px;    
    margin-bottom:10px;
}

.single_product_display .wpsc_variation_forms table, #content .single_product_display .wpsc_variation_forms table, .single_product_display .wpsc_variation_forms table tr, #content .single_product_display .wpsc_variation_forms table tr, .single_product_display .wpsc_variation_forms table td, #content .single_product_display .wpsc_variation_forms table td {
    border:none;
    border-collapse:collapse;   
    margin:0;
}

.single_product_display .wpsc_variation_forms table td.col1, #content .single_product_display .wpsc_variation_forms table tr td.col1 {
    width:10%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.single_product_display .wpsc_variation_forms table td.col2, #content .single_product_display .wpsc_variation_forms table tr td.col2 {
    width:60%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.single_product_display .wpsc_variation_forms select {
    margin:0;
    min-width:100px;    
    max-width:200px;
}

.default_product_display .wpsc_quantity_update {
    margin-bottom:10px;
    padding-bottom:10px;
    margin-left:10px;
}

.single_product_display .wpsc_quantity_update input, #content .single_product_display .wpsc_quantity_update input {
    margin:0;
    line-height:1.2em;
    font-size:12px;
}


.single_product_display .wpsc_quantity_update label, #content .single_product_display .wpsc_quantity_update label {
    font-family: Georgia, "Bitstream Charter", serif;
    margin:0;
    line-height:1.2em;
    font-size:12px;
    color:#F60;
}

.single_product_display .wpsc_product_price {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 10px;
    padding: 5px;
}

.single_product_display .wpsc_product_price p, #content .single_product_display .wpsc_product_price p {
    margin:0;
}

.single_product_display .wpsc_product_price span.oldprice {
    text-decoration:line-through;
}

.single_product_display p.soldout {
    font-weight:bold;
    font-size:14px;
    color:#C33; 
    background:url(wpsc-images/outofstock.png) no-repeat scroll 0 5px transparent;
    padding-left:18px;
}

.single_product_display div.wpsc_loading_animation {
    visibility:hidden;  
}

.single_product_display .wpcart_gallery img, #content .single_product_display .wpcart_gallery img {
    margin-right:6px;
    border:1px solid #ccc;  
}

.single_product_display .FB_like iframe {
    border:none;
    width:300px;
    height:80px;
    outline:none;
    overflow:hidden;
}

Answers


This problem has been resolved. I put this code into my style.css file.

wpsc_default_product_list {
float: left;
width: 600px;
}

.wpsc_category_grid {
float: right;
width: 650px;
}

Need Your Help

Patterns for filling in-memory databases with testing data

java database hsqldb

I would like to know what would be the best way to fill in memory database for testing with test data - how to manage such data, how to make simple insert scripts, what are good tools to support this

Store the order of something in MySQL

php mysql

Let's say I have a table that's like the following:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.