Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > <div> automatic width according to their contents?

Reply
Thread Tools

<div> automatic width according to their contents?

 
 
Jean-Fran?ois Lacrampe
Guest
Posts: n/a
 
      06-24-2004
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
 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      06-24-2004
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

 
Reply With Quote
 
 
 
 
Mitja
Guest
Posts: n/a
 
      06-25-2004
Toby A Inkster <(E-Mail Removed)>
(news(E-Mail Removed) ) 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?



 
Reply With Quote
 
Jean-Fran?ois Lacrampe
Guest
Posts: n/a
 
      06-26-2004
"Mitja" <(E-Mail Removed)> wrote in message news:<PbSCc.5634$(E-Mail Removed)>...
> Toby A Inkster <(E-Mail Removed)>
> (news(E-Mail Removed) ) 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
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      06-27-2004
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

 
Reply With Quote
 
suyashxp suyashxp is offline
Junior Member
Join Date: Oct 2009
Posts: 1
 
      10-29-2009
i also faced the same problem : but i resolved it by

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

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Print numbers according to their native promoted type John Reye C Programming 16 06-23-2012 03:48 AM
Re: People dumping their Google stock, according to 7's data Ezekiel Computer Support 2 09-05-2009 01:10 PM
Converts half-width katakana to their full-width counterparts wing328hk@gmail.com Perl Misc 2 04-17-2006 02:22 PM
sorting maps according to their value_type cesco C++ 5 02-10-2006 12:04 PM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM



Advertisments