AbleCommerce Front end not centering on the page

[paulh1971]

Hello, the AbleCommerce front end was set at 100% width. I changed it to 800px. That worked fine, but it justifies to the left. I have tried everything I can think of, but it just won't center. Has anyone ever had this problem, and found a solution? Any help would be very much appreciated.

Thanks!

[jmestep]

It has to do with the body style padding and margins in your style.css. Here is what changed ours.
body { padding: 0px 0 0 0 ; margin:0px auto 0 auto; background:RGB(128,125,159);font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width:1000px;}
The auto auto is what is important for Firefox- IE centered OK without it.

[m_plugables]

I have faced this problem some time ago. I have tried center align the outer containers but that fix has some cross browser problems. The quick workaround i found was to made modification in the layout scriptlets and it worked fine.

You just need to wrap all the contents of each layout scriptlet into a three column table with width 100% and then assign the center column a width of 50% and assign 25% width to both side columns. The center column will contain all the contents of layout scriptlet.

For example if you want to center align the pages using Three column template then the Three Column Layout scriptlet should look like.

Code: Select all

<!--
<Description>
Displays headers, footers, a left sidebar, a right sidebar, and a main content area.
</Description>
-->
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:25%">
&nbsp;
</td>
<td style="width:50%">

[[layout:header]]
<div id="outerContentWrapper">
	<div id="innerContentWrapper">
		<table cellspacing="0" cellpadding="0" id="contentLayout">
			<tr>
				<td align="left" valign="top" id="leftSidebarPanel">
					[[layout:sidebar]]
				</td>
				<td align="left" valign="top" id="mainPanel">
					[[layout:content]]
				</td>
				<td align="left" valign="top" id="rightSidebarPanel">
					[[layout:sidebar2]]
				</td>
			</tr>
		</table>
	</div>
	[[layout:footer]]
</div>

</td>
<td style="width:25%">
&nbsp;
</td>
</tr>
</table>

This works fine for both the IE and FF

[IndyTwoStep]

There is a better, more flexible way to do this...

Add this to your theme's style.css file:

Code: Select all

#wrapContainer {
margin:0pt auto;
max-width:1000px;
min-width:700px;
width: expression(document.body.clientWidth < 701? "700px" : document.body.clientWidth > 1001? "1000px" : "auto");
}

(You can replace 700px and 1000px with whatever your want you min / max width to be)
!If you use this technique, remember to change the width in the expression above as well, and notice how 701 / 700 and 1001 / 1000 are used, this ensures that this works smoothly in IE as well as FF and Opera...

Now, using a similiar method, wrap the layout scriptlet (whichever ones you want this effect - 3 column, whatever...) with this code:

Code: Select all

<div id="wrapContainer">
[[layout:header]]
<div id="outerContentWrapper">
	<div id="innerContentWrapper">
		<table cellspacing="0" cellpadding="0" id="contentLayout">
			<tr>
				<td align="left" valign="top" id="leftSidebarPanel">
					[[layout:sidebar]]
				</td>
				<td align="left" valign="top" id="mainPanel">
					[[layout:content]]
				</td>
				<td align="left" valign="top" id="rightSidebarPanel">
					[[layout:sidebar2]]
				</td>
			</tr>
		</table>
	</div>
	[[layout:footer]]
</div>
</div>

In this example, i created a flexable width layout, but you could just as easily define #wrapContainer as a fixed width div with auto margins and get the same effect that mazhar described.... Though flex width layouts add a new dimension to this technique.

[mdickinson]

IndyTwoStep's post worked so great! Thank you, thank you!

[Maryram]

I'm trying to center my web page.

Using Indy's post, I get lost on this part :

Now, using a similiar method, wrap the layout scriptlet (whichever ones you want this effect - 3 column, whatever...) with this code:

Where do I find these scriptlets and how many of them do I add the
<div id="wrapContainer"> . . . to ?

[plugables]

Just do something like this in your stylesheet for body element.

Code: Select all

body
{   
    margin:0 auto;
    width:980px;
}

[clevername]

Just so you know you have to set the exact width of the element for the "margin: 0 auto;" to work. For example:

Code: Select all

body {
     width:1000px;
     margin:0 auto;
}

IndyTwoStep's suggestion uses CSS Expressions which is not a very good practice. And it can be done without them with easy valid CSS.