Fixed width or not? Do both!

Chance · September 8, 2005

I know many people on this forum loathe fixed width, 800x600 shops.

From a design standpoint, its much easier to customize a layout for a fixed width where everything stays in one place. From a readability standpoint, blocks of text are much easier to read on shorter lines that are afforded by a fixed width shop.

People can not easily follow long lines of text on computer screens like the ones 100% width shops create! Its harder for the reader to find the next line after moving across so much screen real estate, and its not as pretty either.

However, for the growing number of users who use high resolution monitors these fixed width shops waste about 60% of our screen space, and generally are a pain in the butt to look at.

The challenge is to allow variable width (% widths) so that your site will scale to the screen size, but still maintain a level of control over how wide a line of text will go, and how wide the entire site will go to prevent repeating background images, etc.

This super easy solution is simple to impliment, supported on IE5+, Mozilla, Opera, and just about everything else put out in the past 5 years, and is CSS. It degrades gracefuly on browsers that don't support it (goes variable width 100%). It will allow your site's width to scale based on your browsers window size from narrow (800x600) up to any larger width you specify. Once it reaches the max width you are comfortable with, it stops and acts as a fixed width table again.

See an example here: http://www.jccommerce.com/osc_forums/expre...layout_test.php

You can browse the directory and view all image, CSS, and php/html files used in this example here: http://www.jccommerce.com/osc_forums/expression_example/

This simple "limited variable width" trick is done with one line of CSS:

.sitewrapper {
border: thin solid #000000;
background-color: #FFFFFF;
max-width:955px;
width: expression(document.body.clientWidth > 955? "955px": "auto" );
}

The "width:" line is an expression that tells the client to only size to a maximum width of 955px, or the correct size for a 1024x768 monitor. You can change the number values on that line to anything you wish to limit the size to that value (just remember to change both numbers "955?" and "955px" to whatever you want.

For more on optimal page width for browser sizes, check this link:

http://www.wpdfd.com/browsergrid.htm

bobsi18 · June 1, 2006

I love the idea of this, but I can't get it to work! I presume that you have to 'call' the sitewrapper, but I'm not sure how - are you able to give me a few pointers (you're blog is a great read by the way!)

~barbara~

muskokee · June 1, 2006

I love the idea of this, but I can't get it to work! I presume that you have to 'call' the sitewrapper, but I'm not sure how - are you able to give me a few pointers (you're blog is a great read by the way!)

~barbara~

Wrap your whole site in a <div> with the class provided. Place the start of the <div> right after the <body> tag and the end of the </div> right before the </body> tag.

Personally I use percentages rather than a fixed pixel size to make my site "liquid" (flows seemlessly from 800 to 1280 width).

Sheri

P.S. that would look like:

<body>
<div class="sitewrapper">
CONTENTS HERE
</div>
</body>

bobsi18 · June 1, 2006

Wrap your whole site in a <div> with the class provided. Place the start of the <div> right after the <body> tag and the end of the </div> right before the </body> tag.

Thanks Sherri, works a treat! Gues I should revert back to calling myself a newbe - that was one I probably should have known!

cheers

~barbara~

June 5, 2006

I can get this to work but have a few problems.

1. In IE6 the site is centered, in Firefox the site is aligned left ?

2. In IE6 at 800x600 there is a horizontal scroll bar, but not in Firefox? I can lose the scroll bar in IE if I remove the border in sitewrapper.

June 5, 2006

Managed to get problem No1 sorted. Firefox centers the page now by adding "margin: 0 auto;" as in the code below.

.sitewrapper {
border: thin solid #000000;
background-color: #FFFFFF;
max-width:955px;
width: expression(document.body.clientWidth > 955? "955px": "auto" ); margin: 0 auto;
}

Sheri how do you use percentages?

muskokee · June 5, 2006

Managed to get problem No1 sorted. Firefox centers the page now by adding "margin: 0 auto;" as in the code below.
.sitewrapper {
border: thin solid #000000;
background-color: #FFFFFF;
max-width:955px;
width: expression(document.body.clientWidth > 955? "955px": "auto" ); margin: 0 auto;
}
Sheri how do you use percentages?

Everything that is meant to expand and contract is defined in percentages: width: 50%. Which means that whatever the resolution the section defined with 50% will remain 50% whether that is 400px or 512px or 640px. In this way, the sections expand and contract along with the various resolutions that a user might have.

My site defines the body as 100%(with overflow-x: hidden;). The inner <div> is 98% (just because of my design). Then within the 98% I have various widths including static pixels, for those items that i do not want to expand or contract, such as the left and right columns. The inner body of the site is set at a percentage of the screen, so when you view the site in different resolutions, it is the inner body that changes and appears to "stretch" to fit the area. My header image also expands and contracts to fit the screen. By using <div>'s along with z-index you can overlap images, align one right and align the other left. As they "stretch" more of the lower indexed image is revealed.

I like using percentages because I like utilizing the full width of the screen, although centered fixed widths can be great as well ;)

HTH

Sheri

muskokee · June 5, 2006

2. In IE6 at 800x600 there is a horizontal scroll bar, but not in Firefox? I can lose the scroll bar in IE if I remove the border in sitewrapper.

try adding this to the sitewrapper to remove the scrollbar:

overflow-x:expression(hidden);

Sheri

Cathi · June 6, 2006

Wrap your whole site in a <div> with the class provided. Place the start of the <div> right after the <body> tag and the end of the </div> right before the </body> tag.

P.S. that would look like:
<body>
<div class="sitewrapper">
CONTENTS HERE
</div>
</body>

I'm new at this, so I apologize if this is a stupid question, but what does "wrap your whole site" mean? Which files would those div tags be placed in?

Thanks!

Cathi

muskokee · June 7, 2006

I'm new at this, so I apologize if this is a stupid question, but what does "wrap your whole site" mean? Which files would those div tags be placed in?

Thanks!

Cathi

Hi Cathi,

No questions are stupid! ;) <div> tags are used to create "blocks" in your design...say, like a piece of printer paper...it contains the information printed on it so that the lines HAVE to return(old typewriter lingo :lol: ). <div>s contain your webpage content.

You would place the tags in each an every file you want to contain to a specific size. One (<div class="sitewrapper">)directly after the <body> tag and one (</div>) directly before the </body> tag. This puts a "box" on your page that the content cannot overflow. All visable content on your site in inside the two <body> tags.

HTH :thumbsup:

Sheri

Cathi · June 7, 2006

Thanks, I think I understand a little better. Would a <div> then be like a paragraph, or more like a table row? I'm going to go to my HTML editor and play around with <div>'s to get a better idea of exactly what they do to a page. :D

The only file I can think of that has body tags is the index.php, so is that the only one where I would have to put the <div>'s?

Cathi

muskokee · June 7, 2006

Thanks, I think I understand a little better. Would a <div> then be like a paragraph, or more like a table row? I'm going to go to my HTML editor and play around with <div>'s to get a better idea of exactly what they do to a page. :D

The only file I can think of that has body tags is the index.php, so is that the only one where I would have to put the <div>'s?

Cathi

A div is a container. Here's a link to a page I quickly put together. Each <div> is a different colour

div example

Here is the code for that page:

<html>
<head>
</head>
<body>
<div style="position:fixed; margin:0;width: 98%; height: 101%; background:green;">
<div style="position:fixed; margin:0;width: 80%; height: 80%; background:blue;">
<div style="position:fixed; margin:0;width: 60%; height: 60%; background:orange;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
 ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
 in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
 facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
 luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
 lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
 dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
 eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
 qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
 facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
 nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
</div>
</body>
</html>

I put one div inside another and another to stack them and only have text in the inner most <div>. There are so many css tricks you can do with <div>'s, different positioning, fixed widths, fluid widths. There is a ton of info on the net about desiging with them.

Sheri

P.S. EVERY page has body tags---they have to--- (unless your using a template system), then only the tpl files will have body tags.

Cathi · June 7, 2006

Sheri,

That's interesting. I'll look for some more tutorials on the web. B)

P.S. EVERY page has body tags---they have to--- (unless your using a template system), then only the tpl files will have body tags.

I guess I didn't ask the question correctly. :blush: I meant to say, for example, that the catalog/includes/languages/english.php file does not have body tags, so I know I wouldn't put <div>'s in there. How many files in osC would I have to add these tags to if I were to modify my site this way? (at some point in the future, I don't think I'm ready yet... :P )

Cathi

June 7, 2006

Cathi,

Like you I was going to start putting the sitewrapper code in all the necessary files but then copied what the centershop contribution does and installed the sitewrapper code in just two files, the begining of header.php and the end of footer.php.

I'm not sure if this is the right way as there are no body tags in these two files however it does seem to work so far.

I checked various files and header.php is "called" immediately after the <body> tag and footer.php is "called" immediately before the </body> tag in those files.

Jeff.

muskokee · June 7, 2006

Sheri,

That's interesting. I'll look for some more tutorials on the web. B)

I guess I didn't ask the question correctly. :blush: I meant to say, for example, that the catalog/includes/languages/english.php file does not have body tags, so I know I wouldn't put <div>'s in there. How many files in osC would I have to add these tags to if I were to modify my site this way? (at some point in the future, I don't think I'm ready yet... :P )

Cathi

You would add them to every file that a user can browse to...index, product_info, reviews, checkout, info pages, etc. Essentially, almost all of the files in the main catalog folder(or your root). It's just for display purposes.

As Jeff said you could put them in the header and footer files (I forgot about those---my site is very modified). That would apply the <div>'s automatically to every file, so you would only have to change 2 files rather than dozens.

Sheri

c-m · January 19, 2007

I added the above code to my stylesheet and then edited header.php and footer.php (there are no body tags in there at all), to include <div class="sitewrapper"> at the very begining of the document before anything else, and </div> at the very end.

So far its done absolutely nothing to my site. My site is still shown full screen when viewed at 1024x768, which obviously totally defeats the purpose of this.

I also tried adding <div class="sitewrapper"> </div> codes to index.php (again there's not body tags there) and again my site is still fullscreen. Can anyone shed any light on this?

andytc · January 19, 2007

I added the above code to my stylesheet and then edited header.php and footer.php (there are no body tags in there at all), to include <div class="sitewrapper"> at the very begining of the document before anything else, and </div> at the very end.

It works for me ok

the div should go here in header.php , just before the html starts

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

?>
<body>
<div class="sitewrapper">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">

and in footer after the last closing ?>

?>
</div>
</body>

hope this helps

c-m · January 19, 2007

thanks, but it hasn't really changed anything. I do have a box around my header and footer though.

Am i correct in thinking that applying this is supposed to make my site as if a used the fixed width contrib?

andytc · January 19, 2007

thanks, but it hasn't really changed anything. I do have a box around my header and footer though.

Am i correct in thinking that applying this is supposed to make my site as if a used the fixed width contrib?

yeah , it seems to just do fixed width. I'm not sure what the "do both" is all about , but i no longer use the fixed width contrib anyway as my new site design seems to expand and contract nicley.

if you see a border around your site , then it's working. Check your site at different resolutons to see the effect.

Fixed width or not? Do both!

Recommended Posts

Chance

bobsi18

muskokee

bobsi18

Guest

Guest

muskokee

muskokee

Cathi

muskokee

Cathi

muskokee

Cathi

Guest

muskokee

c-m

andytc

c-m

andytc

Archived

Browse

Activity