Grow your CSS skills. Land your dream job.

Inline List Contained in Parent Element always at 100%?

  • # May 20, 2010 at 1:42 pm

    Hello everyone,

    I have a horizontal menu with 9 inline list items contained inside a parent div that is approx. 1000 pixels wide. Currently, I have the list items spaced by using a padding-right and padding-left definition in pixels.

    What I’m running into, however, is that when the user’s default font changes to a definition lower in the font string (some of which are wider or larger), the list items bump down to the next line because they increase in size.

    Does anyone know how I can space these items using percentages, or something similar, so that when the list expands, it adjusts the padding accordingly, allowing the list to continue to fill 100% of the parent element? Or maybe a better solution to solve this problem?

    The attached image has the parent div highlighted in pink to better illustrate what I’m trying to describe.

    Thanks so much!

    Monica

    Dr3
    # May 21, 2010 at 11:01 am

    A live url would make this far easier

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".