<div> automatic width according to their contents?

Discussion in 'HTML' started by Jean-Fran?ois Lacrampe, Jun 24, 2004.

  1. Hello again,

    I'm struggling with another basic problem:

    <div class="mainbox-title-content">
    <h4>Content !</h4>
    </div>

    if I use this stylesheet:

    ..mainbox-title-content {
    background-image: url("images/mainbox-tc.png");
    background-repeat: repeat-x;
    height: 28px;
    display: block;
    }

    The <div> takes a width of 100% by default.

    If I replace display: block with display: inline, the <div> adapts to
    the width of the text it contains. That is the behaviour I want. BUT
    setting it inline makes the browser ignore the height.

    What I'd like is that the width adapts automatically according to the
    content with a fixed height, in fact, emulating the tables behaviour.
    There's a display:table tag, which works well with gecko, but won't
    work with IE. I can't rely on it for obvious reasons. :-/

    Is there another way to do that or will I have to revert to a good old
    table for that?

    Thanks,
    JFLac
     
    Jean-Fran?ois Lacrampe, Jun 24, 2004
    #1
    1. Advertising

  2. Jean-Fran?ois Lacrampe wrote:

    > If I replace display: block with display: inline, the <div> adapts to
    > the width of the text it contains. That is the behaviour I want. BUT
    > setting it inline makes the browser ignore the height.


    Nasty hack:

    <div class="mainbox-title-content">
    <h4>Content!<img src="transparent.gif" alt="" width="1" height="28"></h4>
    </div>

    ..mainbox-title-content {
    background-image: url("images/mainbox-tc.png");
    background-repeat: repeat-x;
    display: inline;
    }

    That work?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Jun 24, 2004
    #2
    1. Advertising

  3. Jean-Fran?ois Lacrampe

    Mitja Guest

    Toby A Inkster <>
    (news:p) wrote:
    > Jean-Fran?ois Lacrampe wrote:
    >
    >> If I replace display: block with display: inline, the <div> adapts to
    >> the width of the text it contains. That is the behaviour I want. BUT
    >> setting it inline makes the browser ignore the height.

    >
    > Nasty hack:
    >
    > <div class="mainbox-title-content">
    > <h4>Content!<img src="transparent.gif" alt="" width="1"
    > height="28"></h4> </div>


    That's down to personal taste, but I'd rather do with a table than a
    transparent gif.

    > .mainbox-title-content {
    > background-image: url("images/mainbox-tc.png");
    > background-repeat: repeat-x;
    > display: inline;
    > }
    >
    > That work?
     
    Mitja, Jun 25, 2004
    #3
  4. "Mitja" <> wrote in message news:<PbSCc.5634$>...
    > Toby A Inkster <>
    > (news:p) wrote:
    > > Jean-Fran?ois Lacrampe wrote:
    > >
    > >> If I replace display: block with display: inline, the <div> adapts to
    > >> the width of the text it contains. That is the behaviour I want. BUT
    > >> setting it inline makes the browser ignore the height.

    > >
    > > Nasty hack:
    > >
    > > <div class="mainbox-title-content">
    > > <h4>Content!<img src="transparent.gif" alt="" width="1"
    > > height="28"></h4> </div>

    >
    > That's down to personal taste, but I'd rather do with a table than a
    > transparent gif.
    >
    > > .mainbox-title-content {
    > > background-image: url("images/mainbox-tc.png");
    > > background-repeat: repeat-x;
    > > display: inline;
    > > }
    > >
    > > That work?


    I can't say I love the idea of transparent gifs (CSS is supposed to
    help us to get rid of these nasty hacks, right?), but the idea lead me
    to this:

    <div class="mainbox-title-encaps">
    <img src="images/mainbox-tl.png" width="8" height="28" alt="(" />
    <div class="mainbox-title-content">
    Content here
    </div>
    <img src="images/mainbox-tr.png" width="8" height="28" alt=")" />

    div.mainbox-title-encaps {
    background: #ffffff url("/images/mainbox-tc.png") repeat-x;
    height: 28px;
    display: inline;
    float: left;
    }

    div.mainbox-title-content {
    vertical-align: 8px;
    display: inline;
    }

    I had to add a starting and an ending png anyway, so it does the trick
    for the height.

    There's one problem left, though. I wanted this title to be
    horizontaly centered, but the float tag only allows left or right
    alignment. I've tried a lot of tricks (one or two more level of
    nesting, text-align:center, margin -left and -right: auto, etc.). No
    success, the float predominates. If I remove the float, my initial
    problem comes back.

    Any idea?
    JFlac
     
    Jean-Fran?ois Lacrampe, Jun 26, 2004
    #4
  5. Jean-Fran?ois Lacrampe wrote:

    > I can't say I love the idea of transparent gifs (CSS is supposed to
    > help us to get rid of these nasty hacks, right?),


    Well the ideal solution is "display:inline-block", but only Opera supports
    that right now.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Jun 27, 2004
    #5
  6. Jean-Fran?ois Lacrampe

    suyashxp

    Joined:
    Oct 29, 2009
    Messages:
    1
    i also faced the same problem : but i resolved it by

    margin: 0 auto;
    understand by both Ie and Mozilla firefox
     
    suyashxp, Oct 29, 2009
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    840
    Bruce Barker
    Oct 10, 2005
  2. Rob Martin

    Width of DIV as regards to contents

    Rob Martin, Oct 1, 2003, in forum: HTML
    Replies:
    3
    Views:
    491
    Mark Parnell
    Oct 1, 2003
  3. cesco
    Replies:
    5
    Views:
    393
    Maxim Yegorushkin
    Feb 10, 2006
  4. Replies:
    2
    Views:
    615
    Brad Baxter
    Apr 17, 2006
  5. John Reye
    Replies:
    16
    Views:
    718
    Tim Rentsch
    Jun 23, 2012
Loading...

Share This Page