PDA

View Full Version : Horizontal Centering WITHOUT cutting off site view

Ember~Daze
06-24-2004, 08:11 AM
Hello,

The site I'm currently working is aimed at being 100% CSS and so far so good. The last thing I need to make my site fully functional is a working way to center my containing DIV (which has other objects absolutely positioned within it). BUT the catch is - I can't have the site being cut off on the left side of the browser when the window size drops below the containing DIV's width. I've seen it done many times before so that resizing the window smaller then (in my case) 779px only closes the site view from the right side while the left maintains its solid edge and position. I really need help with this.

The reason I can't have it cut off on the left is because I'm using 'faux columns' and they don't work when the left side pushes out of view.

Thank-you! :thumbsup:
ronaldb66
06-24-2004, 02:46 PM
That's the drawback of the abs pos method you're probably using; another approach would be to set the left and right margin of your container div to "auto" (provided its width is explicitly specified), which would center it in all compliant browsers. For IE, specify "text-align: center;" on the element containing the container div (IE incorrectly applies text-align to block level elements, too) and correct text alignment on the container div itself if needed.
Ember~Daze
06-24-2004, 05:13 PM
Thanks for the reply. I have tried what you suggested but the page still cuts off on the left when the window is collapsed. Here's my CSS for positioning it in the center.

BODY {
margin: 0;
font-family: 'Trebuchet MS', Verdana, Arial;
font-size: 0.79em;
background-image: url(graphics/nhscontainerback.gif);
background-repeat: repeat-y; background-position: 50% 0;
text-align: center; }

#container {
height: 100%;
width: 779px;
position: relative;
margin-left: auto;
margin-right: auto; }

A site which shows what I "want" to happen is... SimpleBits (http://www.simplebits.com) Try reducing the window size from the right moving to the left - you'll see that the page's content does not push to the left, but rather the window just closes over it. And at the same time it stays centered through thick and thin res changes and window size changes.

EDIT: I just noticed that your method works in IE exactly how I want it too. But in FF, Moz, and NS it still carries the main problem.
mindlessLemming
06-24-2004, 05:25 PM
Adding this to <body> should fix things in Gecko browsers...

body {min-width:779px;}

H.T.H :D
Ember~Daze
06-24-2004, 05:57 PM
Thanks for that snippet! It fixed the problem. *bows courteously to MindlessLemming and Ronaldb66*

I've also figured out a way to achieve a more reliable non-breaking colum effect. I put the background image for the faux columns in the container rather then the body so that it doesn't depend on the window size to display correctly. But to get the background to display (give some content other then DIVs so that the height expands) I put a paragraph for my text and a combo of padding and margins to position it correctly. And after some trial and error - it works! Now I just need to add in the IE box model hack and things should be a rollin'. :thumbsup: :)
Ember~Daze
06-24-2004, 06:31 PM
Excuse my double post - but instead of starting a new thread I thought I'd ask a related question here.

I've never applied the IE box model hack before and I seem to be having trouble. I've read a lot of information and understand why it works but the proper format of it is bringing me to confusion when it comes to applying the concept. Here's the code I know it needs to be applied too. If anyone can give me a hand on properly inserting the hack I'd appreciate it. Thanks!

NOTE: p.content is the element which needs the IE hack.

BODY {
margin: 0;
font-family: 'Trebuchet MS', Verdana, Arial;
font-size: 0.79em;
text-align: center;
min-width:779px; }

#container {
height: 100%;
margin: 0 auto;
width: 779px;
position: relative;
height: auto;
background-image: url(graphics/nhscontainerback.gif);
background-repeat: repeat-y;
padding-top: 345px;
padding-bottom: 0; }

p.content {
width: 430px;
text-align: left;
padding-left: 325px;
}
mindlessLemming
06-25-2004, 03:15 AM
You're more than welcome *gratious bow*

--Put this after p.content in css ;)

* html p.content {
\width: 755px; /* IE 5, 5.5 and IE 6 PC*/
w\idth: 430px; /* Reset IE 6 if you're not in "quircks mode" */
}

The above method combines the "Star Selector Hack" to only allow IE/W to apply the declaration. The properties use "Tan Escape Hack" (?can't remember?) to differentiate between IE 6 and earlier versions.
The difference between this method and the more popular "Tantek Box Hack" is that this one is valid CSS :D
I think that's what you're after; I'm in a hurry and may have missed something...:o
Ember~Daze
06-25-2004, 04:24 AM
No sir, that is it. That's what I was looking for. Thanks once again for all your help. Now I can sleep a little easier knowing IE won't be haunting my nightmares.
ronaldb66
06-25-2004, 07:37 AM
Glad I could help. By the way, Dan Cederholm (SimpleBits) uses the exact same technique I described; he has the whole site, including header and footer, in one wrapper which he centers using auto margins.
Fortunately, mindlessLemming could supply that much needed addition; I've learned something along the way, too! :thumbsup: