A Very Wonkish CSS question...

May 2, 2006 1:38 PM

Very wonkish CSS question: how do I keep the left edge of a DIV visible, despite how small a user makes the browser viewport?

See this site. Notice how, regardless of how small horizontally you make the browser window, the left edge of the primary site container element remains visible? E.g., the left edge of the main company logo, top nav bars and so on? I want to implement this on a Web site whose build-out I'm wrapping up.

I've tried messing with CSS min-width property and its IE-specific emulations, but don't think that's the key here.

This is driving me nuts -- I'll consider any CSS or Javascript solutions you can offer. Help me Metafilter!

posted by killdevil to Media & Arts (10 answers total)

This works (at least in Firefox), and seems to be what the example site is doing:

<div id="test">hello!</div>

<style type="text/css">
#test {
width: 10em;
margin: 0 auto;
}
</style>
posted by mbrubeck at 1:44 PM on May 2, 2006

Response by poster: The trouble I'm having may be related to the fact that my outermost container div uses the following trick to center itself in the browser window:

#outercontainer
{
width: 850px;
height: auto;
margin: 0;
margin-left: -425px;
padding: 0px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
}
posted by killdevil at 1:56 PM on May 2, 2006

Best answer: Yeah, it's your negative left margin trick that's causing your left edge to be positioned at a negative location. Is there a reason you have to use absolute positioning here? Would this work instead?

#outercontainer
{
width: 850px;
height: auto;
margin: 0 auto;
padding: 0;
text-align: left;
}
posted by mbrubeck at 2:01 PM on May 2, 2006

P.S. Add the following to prevent space from appearing above the top of the container:

body { padding-top: 0; margin-top: 0 }
posted by mbrubeck at 2:04 PM on May 2, 2006

Response by poster: Hmm. That _mostly_ works.

However, I now have three absolutely-positioned elements that are situating themselves with respect to the browser window, as opposed to the #outercontainer element (as should be the case).

That was why I had had it positioned absolutely, I think.
posted by killdevil at 2:13 PM on May 2, 2006

Best answer: Adding "position: relative;" to #outercontainer should fix that...
posted by mbrubeck at 2:16 PM on May 2, 2006

Response by poster: The absolutely positioned elements are children of the #outercontainer element, so they don't position themselves properly unless it too is absolutely positioned.

(All three of these are alpha-transparent PNG overlays that do drop shadows).
posted by killdevil at 2:16 PM on May 2, 2006

Response by poster: Actually I take that back.

It works! Thanks, mbrubeck!
posted by killdevil at 2:17 PM on May 2, 2006

To be specific, absolutely positioned items position relative to the lowest parent in the hierarchy which has its position attribute set, even to static, or else the browser window if there are none.
posted by abcde at 3:06 PM on May 2, 2006

Best answer: Aside: 'margin: 0 auto' won't work in IE for the Mac (if you have to support that browser); you need to do 'margin-left: auto; margin-right: auto; margin-top: 0; margin-top: 0;'. And, of course, left and right margins set to 'auto' will not center a block element in IE for Windows -- the parent element needs a 'text-align: center' for that to happen.
posted by ubernostrum at 7:27 PM on May 2, 2006 [1 favorite]