Easy Fixed Width & Center osCommerce Store

Standard osCommerce installs a fluid site, which means your site width will adjust to fill the visitors entire screen. While a fluid site is convenient in this aspect, its an inconvenience when trying to create custom headers and footers as well as customizing the look of your store.

When determining the width of your site, consider your page layout, graphics, header and footer and so on. You may also consider the majority of users screen resolution.

According to W3 Schools Browser Display Statistics 54% of Internet users have a screen resolution setting of 1024x768. I've found that a 960 pixel width site is a good fit for 1024x768 resolution screens. Of course, anyone with a screen resolution less than 1024x768 will see a horizontal scroll bar and any items in the left of the screen may not be visible without scrolling for those visitors.

If you'd like to have a fixed width osCommerce store here's the simple instructions (from the Fixed Width Site with CSS mod) :


1. A minor modification is required to your stylesheet.css file.

Replace the following code:
---------------------------

BODY {
background: #ffffff;
color: #000000;
margin: 0px;
}

with:
-----

BODY {
text-align: center;
background: #ffffff;
color: #000000;
margin: 0px;
}

.fixcenter {
width: 758px;
border: solid; border-width: 1px;
background: #ffffff;
color: #000000;
margin: auto;
margin-top: 20px;
text-align: left;
}

2. On-page changes:

In /catalog/includes/header.php
-------------------------------
immediately below this piece of code

if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
?>

add

<div class="fixcenter">

In catalog/includes/footer.php
------------------------------

Immediately below the closing php tag

?>

add this

</div>

Remember to change to suite your site!


Now, if you would like to try something different and create a site which is both fluid and fixed width you may want to try a Jello width. I personally have not tried this with osCommerce, but I see no reason why it wouldn't work.