Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    inline-block w/ auto width question

    USING...
    display:inline-block; float:left; width:auto;

    I can have the width of the DIV auto adjust to the contents within the DIV. Is it possible however to have the entire DIV float in the middle using the same technique? I have already tried margin-right:auto; margin-left:auto to no avail. Any ideas? Thanks in advance.

    -Andrew

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Just so you know, using display: inline-block and float: left at the same time is pointless since floated elements are by nature block (and not inline) elements. The float declaration will override the display declaration in this case.

    To get the centered, shrink‐wrapped effect that you seem to want, you would use display: inline-block and text-align: center. To make that more clear, the text-align property might be more properly called the “inline-align” property; inline‐block elements are inline and so must be centered with the inline method, not the block method of margin:  auto.

    The above solution presents some compatibility problems though since Firefox does not support display: inline-block yet, and Internet Explorer only supports display: inline-block on elements that are inline by default. You can use the proprietary -moz-inline-block value for (Mozilla) Firefox instead, but it’s a poor substitute and has bugs associated with it.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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