Another CSS Question, Auto width?

Factual Questions
1

Does anyone have an idea about how to autoset the width of a webpage? Let me explain.

Right now I have a website that was designed for a 1024x768 resolution. However, any smaller of a resolution and you get horizontal scroll bars. I fixed some problems earlier by creating a single div container around my site.

What I’d like to be able to do is auto set that site container to the user’s resolution. This way, the site is just as big as their screen. Then I set the contents of the container to percentages and everything looks great.
Does anyone know how this might be done?

2

Set the container’s width to 100%.

3

well, if thats the case, won’t the container then change when the user modifies their browser window? What I’d like to do is that when the user has their browser at Maximize, the site will not need horizontal scrolls but when they shrink the window smaller, they will need horizontal scrolls.

I just don’t want to distort the positions or sized of the content when they shrink their browser.

Will that work with what you’ve said?

And thanks wasson , you’ve proved invaluable with helping me on CSS.

4

Ah, gotcha… no, that won’t work with the simple 100% setting.

Most browsers support “min-width”, but the one that doesn’t is also the most widely used, so that’s something I’d avoid doing.

To do what you want across all browsers, you’ll have to fiddle around with JavaScript to read the size of the window, and set the “width” of the container to a pixel size if that window is less than, say 900 pixels. If larger than 900px, then the JavaScript will update the width to 100%.

How comfortable are you with a bit of JavaScript?

5

very, but I was hoping to avoid it. I had a feeling it was going to lead to that. Thanks!

6

[QUOTE=Surbey]
What I’d like to do is that when the user has their browser at Maximize, the site will not need horizontal scrolls but when they shrink the window smaller, they will need horizontal scrolls.
[/QUOTE]

This is a bad approach to take. Never assume the web user will view your web site with the browser window fully open. With the proliferation of wide-screen displays these days, any web site designed that way will be seriously out of whack when viewed by almost any display.

More importantly, if you build in horizontal scrolling as a normal course of doing business, you will lose that business even before web users decide to look at page two of the site. Unless you are building an artsy fartsy site, horizontal scrolling is almost as bad as <blink> or <marquee> coding. Don’t go there.

You cannot build a site to meet the needs of all users all the time. Instead, select a standard size and build it. Accommodating the 800x600 screen viewing size is still appropriate, although 1024x768 is becoming the standard now.

7

so would it be better to make a site geared toward 800x600 then leave whitespace and such for users with anything higher?

8

[QUOTE=Surbey]
so would it be better to make a site geared toward 800x600 then leave whitespace and such for users with anything higher?
[/QUOTE]

Usually when I am putting together a site for a client I give them two options: liquid or static design. It’s up to them to decide which they prefer, as I find both of them acceptable.

Static means it’s always going to be the same width no matter who views it. It’ll be 760px wide (allowing 40 pixels for the right scrollbar on a 800px wide screen, to be safe) and either centered or aligned left. In this case you don’t actually leave WHITE space but you do leave blank space - usually filled by the page’s background - around the contents of the site. If someone comes in with 1024 resolution then they’ll either see about 300px of space on the right or 150 on either side (depending on how I aligned the site’s content). Any Wordpress-based site is a good example of static design.

Liquid means the site will stretch with the size of the browser. This requires a little more know-how on your part to make it look good at any size. If you have a header you need to be able for it to stretch. If it’s graphic-based you’ll need to do some trickery with background images and a split main image. Usually if there’s a column on the left-hand side for nav or content, it’ll stay a fixed size and the column with the contents will be the one that “moves.”

However, even in a liquid design you want to format the site so it still doesn’t side scroll. Your contents of the site should only fill up 760px. For example, if you have a left-hand nav that you’ve set to be 150px and then a right-hand area for content into which you place a graphic, the width of that graphic should not exceed 610px because the width of the graphic can’t change and neither can the left-hand side (also in this case you’d need to give consideration to your padding and such).

So, basically, all of the design elements you choose that cannot change width should not exceed 760px when lined up side-to-side. Text will wrap so that can easily move when you expand and contract the browser, but images and elements that have been given a fixed width (such as a div) need to be taken into consideration so they don’t cause side scrolling when viewed at 800x600.

When you’re designing, either switch your system’s display to 800x600 periodically to test your site in that size, or make a dummy page that has a link that uses JS to open your site in an 800x600 full-feature (all toolbars, scrollbars, etc) window. That’s the best way to see if you’ve created any side-scroll.

FWIW I still use tables for my main layout, which makes it much easier (for me) to make liquid designs. A simple table-based design would be a 100% width table with a top row with one colspan=2 cell, and a second row with a fixed-width lefthand cell for nav and a non-fixed-width righthand cell for content. I don’t know offhand how one would do this in CSS but I’m sure it’s similar.

9

well, I’ve decided to scale everything to an 800x600 scale. Unfortunately, when I do this and view it in 1024x768, everything is aligned left. If I have a container that encompasses the entire site, can I set that container to be aligned in the middle? Is that possible?

This way, when viewed at a large resolution, you just have space around the content, not a bunch of white space on one side.

10

[QUOTE=Surbey]
well, I’ve decided to scale everything to an 800x600 scale. Unfortunately, when I do this and view it in 1024x768, everything is aligned left. If I have a container that encompasses the entire site, can I set that container to be aligned in the middle? Is that possible?

This way, when viewed at a large resolution, you just have space around the content, not a bunch of white space on one side.
[/QUOTE]

Following is the CSS I’ve recently used to center the content of a site in the browser window, with a fixed width:



body {
	margin:0 auto 0 auto;
	text-align: center; /* Centers container div for IE */
	min-width: 800px;
}
#container {
	width: 800px;
	margin: 0 auto;
	text-align: left; /* Undoes body's center-align */
}

It requires you to put a <div id=“container”></div> around all of your site’s content. This works in both IE and Firefox. It uses auto margins to center the content, and then for IE, which doesn’t like the auto margin aspect so much, it uses text-align to center the <b>container</b> div you create, and then re-aligns the text left within the container.

11

wow, thanks

12

[QUOTE=Surbey]
wow, thanks
[/QUOTE]

No problem! Can’t take credit for it, though. I found it as a solution . . . somewhere on the web, I can’t remember now. I was running up against finding a way to make it work both in Firefox and IE.