<div> automatic width according to their contents?

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

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

Toby A Inkster <>
(news ) 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

"Mitja" <> wrote in message news:<PbSCc.5634$>...
> Toby A Inkster <>
> (news ) 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

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

[suyashxp]

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

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

suyashxp