SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Width relative to content of element

    How do I collapse the width of an element and make it relative to that element's content? For example if I had site width of say 900px and I use an <h3> tag out in the open it would stretch to 900px. How do I make it only the width of the content between the tag without setting the width attribute?

    At first I'd say use a <span> tag but I get bugs when I need the <span> tag to have margins or padding.

    I'd like to think I'm a seasoned CSS pro but this one kind of threw me through an unexpected loop as I never really needed to do this before.

    Thanks!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floating will cause the element to shrinkwrap contents and retain the block display, but the following item will need its clear property set to appear below it. Alternately, there is the inline-block display mode, but it is not supported fully cross-browser.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It requires some workaround but inline-block; does the trick. All browsers have no trouble with it (from memory) except FF2, IE6/7 (partial support)

    For FF2, to get it working you just need display:-moz-inline-block;

    For IE6/7 you need to set it display:inline; THEN display:inline-block;.

    IE8 does not need this so set your CC correctly.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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