<div> automatic width according to their contents?

[Jean-Fran?ois Lacrampe]

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

 

[Toby A Inkster]

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?

 

[Mitja]

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.

 

[Jean-Fran?ois Lacrampe]

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

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

 

[Toby A Inkster]

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.

 

[suyashxp]

i also faced the same problem : but i resolved it by

margin: 0 auto;
understand by both Ie and Mozilla firefox