www.webdeveloper.com
Results 1 to 3 of 3

Thread: stop div from inheriting parents width

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    stop div from inheriting parents width

    If i have a menu using an unordered list how do i make the menu div expand to the width of how ever long the menu items extend.

    <div id="menu">
    <ul>
    <li><a href="#">test 1</a>
    <li><a href="#">test 2</a>
    <li><a href="#">test 3</a>
    </ul>
    </div>

    So #menu should change in width depending on how many menu items there are and not the width of the parent (body).

    Floating #menu works, but how do i get that div in the middle without needing another div?

    Typed on iPhone, so hope it made sense.

    Thx

  2. #2
    Join Date
    Apr 2012
    Location
    Minnesota
    Posts
    2
    You can try to use change the div that wraps the menu into an inline-block, which should make it match the size. and then you should be able to use margins and text-align to center it.

    so you would add this to the menu container:
    Code:
    display:inline-block;
    margin:0px auto;
    and add this to the parent div:
    Code:
    text-align:center;
    you might have to play around with it a bit, I did not test anything.

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    Quote Originally Posted by casey View Post
    You can try to use change the div that wraps the menu into an inline-block, which should make it match the size. and then you should be able to use margins and text-align to center it.

    so you would add this to the menu container:
    Code:
    display:inline-block;
    margin:0px auto;
    and add this to the parent div:
    Code:
    text-align:center;
    you might have to play around with it a bit, I did not test anything.
    Thankyou

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles