2

I'm trying to get a jquery carousel centered on the screen, even when the clipping area is wider than the viewport. This will basically always give the element a negative left margin -- how can I specify this? The clipping area is a fixed width but of course the viewport area is variable.

Carson Myers
  • 37,678
  • 39
  • 126
  • 176

1 Answers1

5

Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:

div.wrapper {
    position: absolute;
    left: 50%;
}
.content {
    position: relative;
    margin-left: -50%;
}

<div class="wrapper">
    <div class="content">JQUERY BIZ-NASS HERE</div>
</div>

Of course, this assumes that your div here is a direct descendant of the body tag, and that your browser specifies body to have a width of 100% and no margin or padding.

Just Jake
  • 4,698
  • 4
  • 28
  • 33
  • neat, thanks! unfortunately it's a wordpress template, so there's all kinds of wrappers around everything, I'm sure I can coerce it though. – Carson Myers May 11 '11 at 01:46
  • weird, it gets pushed over to the right okay, but changing the margin-left of the content doesn't move it back – Carson Myers May 11 '11 at 01:58