Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Thanked 3 Times in 3 Posts

    left: auto vs left: 0

    Why is left:auto used in this code rather than left:0

    #nav li ul {
      position: absolute;
      width: 10em;
      left: -999em;
    #nav li:hover ul {
      left: auto;
    Basically the unordered list is shifted off screen. But when hovering a parent list item, the child ul is shifted back in place. But if the origin of that ul is the placement of its container (the li), then why does left:0 have it resting against the left side of browser window (in google chrome)? And why is left:auto an actual solution? What does auto mean here?

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Nebraska, USA
    Thanked 19 Times in 19 Posts
    I'm unsure why they'd use left:auto;. What is your end goal? What solution do you want? We cannot answer opinion questions, but we can help you achieve an end-goal to fix it

  • #3
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Thanked 56 Times in 56 Posts
    We can not give a wise answer as we don't have enough code. We should know which containing box is the referer for the absolute positioning and what is the context for that page.

    Setting the left to auto does mean that the absolute element will take place where the normal flow is. If there is a padding on the containing block, the left:0 will be different then the auto.

    Left:auto can also be different then left:0 with a rtl (right to left) language.

    However left:auto could be tricky in old IE (7-) as a text-align:center on an ancestor will place the normal flow in the middle instead of left or right.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts