I’m pulling my hair trying to get the webpages to be centered in the browsers.
I’ve tried setting the margins of the html, body and countainer-outer but the page is fixed left justified:
here’s a couple of links to the pages (site in development):
http://50.116.66.243/~ab27853/
http://50.116.66.243/~ab27853/occupational-health/
Thanks!
Add margin: auto; to your #container rules and she’ll center right up. 
Yes, as TheRaptor said, add margin: auto to the #container, but also reduce its width to something like 1020px as it’s currently much wider than the content. Also, to get perfect centering, remove some of the left margins on some of the contents, as they are pushing things off center a bit.
#container {
margin: auto;
width: 1020px;
}
When you set left/right margins to auto, the element will center itself on screen as long as a width is set.
Awesome. Thanks so much guys!!
I designed the site for approximately 1020px. Now that its centered, when maximized in a browser, I get equal white-space. If I wanted to have the page scale based on the browser (and whether its maximized or not to eliminate the whitespace), can I do this easily with cross-browser/platform headaches?
Not totally sure of what you are asking, but if you mean you want the page to grow wider on larger screens or narrower on smaller ones, then yes, this is quite easy. Instead of setting a fixed width, you can instead specify a maximum and a minimum width. However, your design at present looks pretty dependent on fixed widths, so be aware that things will move around a bit if you make the min/max-width change.
If you want the page to always be the size of the viewport and have no whitespace on either sides of your layout, then you’ll either need to create a percentage based layout or work with CSS3 @media-queries. Everything else won’t work and force users to scroll horizontally.
thanks for the replies. Yes, I’d like the page to be the size of the view port so that the page will either increase or decrease proportionally to the resolution and size of the viewport - Especially when someone hit the maximize button on the browser.
The clarify, each container will then have to be designed as a percentage for its width and height rather than a fixed pixel dimension?
Is css3 @media-queries compatible with all browsers and versions (I.E.)? I’d rather not go back and change the site dimensions if I don’t have to, is it straight forward to implement @media-queries?
Can you give me an example?
Thanks
Whether you go fluid (%) or with a media-queries approach, you’ll not get around to doing the layout from scratch to achieve what you want to do as your current layout won’t work, regardless of whether you use px, em, or %. Both methods require a completely different approach. There’s no quick or dirty fix for it.
Also, for a site like yours, it’ll not be beneficial to use an overly wide layout as your content will lose readability if you have it set at 100% of the viewport. Users like myself will then have content go over two lines of text instead of, say, ten. I have a very large monitor and a high screen resolution. I always see the left and right whitespace, unless I keep my window tiny, which I rarely do, and this will be the case for many users.
It really isn’t worth it if your reason for having it at 100% is for cosmetic purposes. If it’s for flexibility and more user control, then use an em or % based layout with a min/max width or media-queries. You’ll never have full control how your site looks on people’s computers, tablets, phones/smartphones, and that’s not a bad thing.
kohoutek, thank you very much for your comprehensive post. It doesn’t sound worth changing the layout to optimize for every viewport. It seems the current width is compatible with most browsers and resolutions for laptops, desktops and smartphones. Most likely we will be creating an optional smartphone user experience.
Another css question. I can’t seem to get rid of the 20px or so padding/margin at the bottom of the page. The vertical gradients stop at the bottom of the page, but then there appears to be some spacing at the bottom of the browser viewport.
Any ideas?
An em based layout would be ideal for your site. Here’s one of my favorite sites and it uses ems. It’s flexible in that the layout adjusts to a user’s font size. You could go for that with your site. You’ll have more flexibility for users and can keep the current look and feel of your site.
As for the gap, you need to contain the floats. Add overflow:hidden; to #container and it should remove the gap.
Seems like a good reference site. I’ll delve into changing the fonts to ems. Thanks. overflow worked like a champ! thanks again for all your input
I didn’t mean just the fonts. I meant the layout (widths) too.
Gotcha. I assumed you were referring to the whole layout as well. Thanks for the reclarification
Hi kohoutek,
I have another css question if you don’t mind:
I have an unordered list that I’ve added an image, however, I can’t seem to get the wrapped text to align in Chrome, Firefox, etc; and IE Indents successive list items?
Any help would be greatly appreciated, thanks:
here’s the link:
I figured it out! thx