Changed main layout width but side boxes not aligning properly

**Bruce_T** · 3 Jan 2008, 11:27 PM

Hello everyone.

I've changed the width of my shop (e.g increased it to 90% by edit #mainwrapper in stylesheet.css) and changing in admin/configuration/layout settings (column width left and right boxes 100% and column width 20% as per instructions from zen cart.)

If you take a look at my shop: http://actionshop.biz/shop/ - I need help in correcting 3 issues that are probably minor but are annoying me endlessly.

We are using zencart 1.3.7

(1) The top left box (categories) the boxes overlap a few pixels to the right.

(2) The main center box seems to not be centered correctly and seems to align left a few pixels.

(3) The right boxes are overlapping the main container a few pixels.

Obviously I need to change or add some values to a css file?

Any help would be most appreciated.

Thanks

Bruce

**gjh42** · 4 Jan 2008, 01:48 AM

Add this to the end of your stylesheet and see what it looks like:

#navColumnOneWrapper, #navColumnTwoWrapper {width: 93% !important;}

This does not fix the problem, it just covers it up; but it gives an idea where to look.

You have #navColumnOneWrapper and #navColumnTwoWrapper set to 100% of the column width in inline styles (which take precedence over stylesheets), and then have margins or padding which add to this. The column can't hold it, so it overflows. Change their width to 93% in admin and they should fit ok. To be completely safe here, you should eliminate the margins or padding and use margin: auto; which will center the boxes in the columns without specifying pixels.

**Bruce_T** · 4 Jan 2008, 02:40 AM

Thanks for that - it solved the problems.

**Sawhorse** · 9 Jan 2008, 04:27 AM

gjh42
It seems that I too have done something to all the boxes (where you fill in information). All have moved to the left about .25 inch. I can see it in sign in, customer information, attributes etc.

I do not know what I did that moved it. Any suggestions?

I added to the end of my stylesheet the following code you provided and it did not do anything:

#navColumnOneWrapper, #navColumnTwoWrapper {width: 93% !important;}

My shop is http://sawhorsejewelry.com and am using ZC 1.3.8a.

Thanks

**Sawhorse** · 9 Jan 2008, 05:23 AM

Problem fixed.

In my stylesheet I had an error under LABEL.inputLabel
I had the following:

LABEL.inputLabel {
width: 1em;
float: left;
}

It should have been:
LABEL.inputLabel {
width: 11em;
float: left;
}

The above width correction fixed everything.

**Philibel** · 18 Mar 2008, 03:48 PM

I have a simular problem.
Main page is ok
but when you go to to an item or shopping cart you get this.
An overflow (or shall I say under) of center text under the right side boxes.

I tried setting Colum boxes to 93%
and Colums to 20%
Yet no result.

Please keep in mind: I only know how to do changes in *.php & *.css for about 2 weeks.

Any help & advise is most welcome.

**Philibel** · 18 Mar 2008, 05:33 PM

I have a simular problem:
-Homepage looks ok
-but when you down to items or shopping cart the center box runs on under part of the right column.

I've changed:
the column width left and right boxes to 93% (before 150px)
and column width to 20% (before 150px)
Yet no change.

As you can see here.

As I only know for two weeks how to edit *. php & *.css, I don't see what is wrong.

Any help or advise is very welcome.

**gjh42** · 19 Mar 2008, 04:06 AM

The error you mention occurs in IE6 but not in Firefox; however, there are header element spacing/overlap errors in Firefox that do not occur in IE.

Your page HTML does not validate (W3C Markup Validation Service ).
Part of the problem is that you have the leaderboard code before the doctype comment and before the opening <html> tag. This is causing many many other errors.

HTML Code:

<center><!-- Start Leaderboard - 728x90 Code -->
<script src="http://cds.adecn.com/add/script.js?v=2.2;siteId=66343;spotId=11783;width=728;height=90">
</script>
<!-- End Leaderboard - 728x90 Code --></center>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl">
<head>
<title>Noveenkaarsen : Zen Cart!, The Art of E-commerce</title>

You need to relocate that code first, and then see what other errors there may be.

**Philibel** · 19 Mar 2008, 11:08 PM

Oops, I didn't see my first post and accidently posted it again. Sorry for that.

The HTML-change is not an option.
I have a free webhosting on the condition that there is a banner on top of the page.
When I try to fix the problem in the index page and upload it, it gives a better error report but that's because it finds a correct order in the edited part.
Editing also ends up in two banners.

I've tried to fix all with the stylesheet. So far so good in IE7, in Netscape the white links in the header fall into the white part of the logo. I plan to fix this with a color change.

**gjh42** · 20 Mar 2008, 07:42 AM

You can still have the banner displaying at the top of your page, but the code for it needs to be relocated because it is breaking the display. The HTML change is not an option, it is essential.

Thread: Changed main layout width but side boxes not aligning properly

Thread Tools

Search Thread

Display

Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Re: Changed main layout width but side boxes not aligning properly

Similar Threads

Menu bar and side boxes not aligning properly in Firefox browser.

button links not aligning properly in side category box

Aligning Side boxes

Posting Permissions