RH boxes out of alignment with top logo when browser page too big

**mad_dexter** · 09-23-2010, 03:25 AM

www.immunesystems.co.uk

When the browser is opened too big for the content the RH box looks completely out of sync with the rest of the page. I did try encompassing everything in a table by adding table to index.php and this solved the symmetry until I went to add a product to the basket. Then page just showed nothing at all... blank. So I undid that.

Is there a way to centre the mainpage so that everything is symmetrical?

Thanks

**pgmarshall** · 09-23-2010, 05:07 AM

You have borked your table structure.

The header should be the full width of the store, then the 3 columns - left, centre and right, then across the bottom the footer.

You simply need to amend the table structure in main_page.tpl.php in <your template> folder.

Regards,

**mad_dexter** · 09-23-2010, 06:19 AM

Just looked at the structure and yes it doesn't sit right because I have a fixed width logo and header sitting between in percentage table.

However, reverting back to fallback main_page.tpl.php doesn't look good either because, since the LH menu is locked to the LH side of the browser window, expanding the browser results in the main content box remaining centred but the gap between it and the LH and RH menus increases.

I would like to get the main content box including LH and RH margins fixed to 1024px so that when the browser window is increased this complete page centres in the browser and appears to float, and any gap is either side of the LH and RH menus.

Is this just a case of changing the table widths in main_page.tpl.php to 1024?

Cheers.

**pgmarshall** · 09-23-2010, 06:30 AM

Just wrap the entire store in a new table with the width you want. If you look at the v2.1 source code for main_page.tpl.php in the new fallback template you will see how to do this. (Click the developers link in the header)

"Industry Standard" is 960px to allow for people with different resolution monitors.

Regards,

**mad_dexter** · 09-23-2010, 07:47 AM

Thanks for the guidance. I appreciate it.

I made a new single column single row table in Dreamweaver and just copied all the php and tables into it. Seems to work fine and looks better with the fixed image, but I will reduce the width of the header image to 960 as you suggest. I don't know why we ended up with a 1024 (that was before my time).

**ridexbuilder** · 09-23-2010, 09:24 AM

1024x768 is the 'standard' non-widescreen SVGA (later called XGA) resolution.
This doesn't take into account the inevitable scroll bar on a browsers' RHS - hence the generally accepted 960/980px width. I still don't understand the many 'skinny' sites that float around the web - poor web designers? Maybe it's for mobiles/iPhones.