Centering column for widescreen displays

[Brian Cox]

We have a structurally simple site layout, with (for example) a section page, section title at the top, standard parent section list, product list with horizontal dividers, and sub sections with horizontal dividers.

as the screen resolution increases, the site begins to look a little lop sided.

above 640 x 480 , the dividing line between the first fragment and the products appears shorter than the dividing line between the individual products.

by the time you get to 1024 x 768 everything is merrily marching to the left, the dividing lines start at the left and end up hanging without making connection on the right ( block text also stops in a vertical line below the end of the dangling dividers), 1280 x 1024 looks like we should be squeezing another column in there to prevent the block of nothingness, and 1920 x 1080 it looks like part of the website is missing from just left of centre of the screen to the right hand side bar so ...

How do we get both the dividing lines and text width to expand / contract to fill the available void caused by varying display resolutions (and thereby visible page width)? The outer layout obviously just does it.

[leehack]

You have 3 widths to set in site options, make sure they are all set to fill the space.

[Brian Cox]

Thanks Lee, almost nearly works in all situations, i guess its a bit of a compromise?

Correct me if i am wrong but:

1/ the first width is in the Site Options General tab setting the site width in pixels
2/ the second width setting is a % in the layout / Section / width of section
3/ the third width setting is a % in the layout / Section / width of product

increasing the width of the whole site (in pixels) to 950 in the General tab with (2) and (3) set to 100% does increase the coverage on wide screens, however simulating an 800 x 600 or 1024 x 768 by changing the properties of the desktop results in the border surrounding the title bar and top navigation bar being a "windows width" and when scrolling to the right as the web page is now wider than the resolution results in the bar scrolling to the left, it is now no longer attached to the right hand side bar (the bottom however is) .

So is the compromise set the site width in pixels for the most common screen resolution and suffer the poor visuals in screens with a higher resolution, or is testing the look and feel of a site by changing the display reloution of a monitor not a suitable way of testing ?

Obviously setting the site width to 800 puts you back in the hanging lines situation again. increasing the % widths to greater than 100% has no effect.

[leehack]

Thanks Lee, almost nearly works in all situations, i guess its a bit of a compromise?

Not really, if you take the recommended route of fixing the width to a 1024 screen (1003px working space), then you can control how the site looks on every screen out there, importantly including mobile devices.

Correct me if i am wrong but:

1/ the first width is in the Site Options General tab setting the site width in pixels
2/ the second width setting is a % in the layout / Section / width of section
3/ the third width setting is a % in the layout / Section / width of product

1 - does not set the site width, it sets the central area width as the other two do also, i set this to be a width, usually around 580-600 dependent on the design
2 - I set this the same as 1
3 - I set this the same as 1 also

After all i want all items located in the main central area to use the maximum width at all times. You only need to use % widths if you are going fluid layout, but that's not recommended anyway. Fluid layouts in actinic simply do not work unless you completely redesign how it works.

increasing the width of the whole site (in pixels) to 950 in the General tab with (2) and (3) set to 100% does increase the coverage on wide screens, however simulating an 800 x 600 or 1024 x 768 by changing the properties of the desktop results in the border surrounding the title bar and top navigation bar being a "windows width" and when scrolling to the right as the web page is now wider than the resolution results in the bar scrolling to the left, it is now no longer attached to the right hand side bar (the bottom however is).

Forget designing to 800 wide screens, they're a done deal, cater for 1024, that's the perfect balance on viewable on all screen and mobile devices and has been for many years now. In the not too distant future this will move up to 1280 as long as mobile devices can jump on the train too.

So is the compromise set the site width in pixels for the most common screen resolution and suffer the poor visuals in screens with a higher resolution, or is testing the look and feel of a site by changing the display reloution of a monitor not a suitable way of testing ?

Obviously setting the site width to 800 puts you back in the hanging lines situation again. increasing the % widths to greater than 100% has no effect.

A site set to fit a 1024 screen does not look bad on a wider screen, you can use site backgrounds to define the area if you want and also bear in mind because most sites are fixed widths, alot of people actually resize the window so that you can see all of the site and have something like skype open alongside it.

Fixed width at 1003px is the only sensible all round option.