want div width to be determined by contents (just like tables)

[Lee]

Often times, I do not want to specify the width of a div. Rather, I
just want it to expand to be just wide enough to enclose its contents.
Since this is how tables behave, I tried setting "div {display:
table;}" and it worked - but only in firefox, but not in IE6. Are there
any alternatives? Am I alone in needing this type of functionality?

Thank You.

[Spartanicus]

"Lee" <cr*************@yahoo.com> wrote:

Often times, I do not want to specify the width of a div. Rather, I
just want it to expand to be just wide enough to enclose its contents.
Since this is how tables behave, I tried setting "div {display:
table;}" and it worked - but only in firefox, but not in IE6. Are there
any alternatives?

<span> might be the answer, or display:inline, or display:inline-block,
proper advice is only possible if you tell us what you are actually
trying to do.

--
Spartanicus

[Lee]

Hi Spartanicus - thank you for your reply.

I have the following code:

<div style="border: 1px solid black;">
<div style="width: 100px; border: 1px solid blue;">100px fixed width
inner div</div>
<div style="width: 200px; border: 1px solid blue;">200px fixed width
inner div</div>
</div>

I want the outer div width to automatically be computed to be the same
width as its largest child (ie: the 2nd 200px wide child div). This is
how tables behave and I would like to find a way to make divs behave
the same (unfortunately, setting "display: table;" doesn't work on
ie6).

Thank you.

[Spartanicus]

"Lee" <cr*************@yahoo.com> wrote:

Hi Spartanicus - thank you for your reply.
If you insist on using the horrible phenomena known as Google Groups
then at least learn to respect the posting conventions that apply here,
have a look at this: http://www.safalra.com/special/googlegroupsreply/
I have the following code:

<div style="border: 1px solid black;">
<div style="width: 100px; border: 1px solid blue;">100px fixed width
inner div</div>
<div style="width: 200px; border: 1px solid blue;">200px fixed width
inner div</div>
</div>

I want the outer div width to automatically be computed to be the same
width as its largest child (ie: the 2nd 200px wide child div). This is
how tables behave and I would like to find a way to make divs behave
the same (unfortunately, setting "display: table;" doesn't work on
ie6).

That may at best qualify as your perceived solution to a still
unidentified problem. This doesn't help, often a big part of the problem
is that people's perceived solutions are wrong. Until you share the
problem by showing us what you are really trying to do there's not much
we can do for you.

--
Spartanicus

[Lee]

Spartanicus wrote:

If you insist on using the horrible phenomena known as Google Groups
then at least learn to respect the posting conventions that apply here,
have a look at this: http://www.safalra.com/special/googlegroupsreply/
Thanks for the info. I am now following the "reply" posting
conventions.
That may at best qualify as your perceived solution to a still
unidentified problem. This doesn't help, often a big part of the problem
is that people's perceived solutions are wrong. Until you share the
problem by showing us what you are really trying to do there's not much
we can do for you.

I run into this problem frequently. One example is when creating forms.
If I use a table, then the table width is automatically computed based
on it's contents. However, if go I tableless with css and use divs
instead, then it doesn't work this way.

Here is more specific code:

stylesheet:
-----------

div {
border: 1px solid red;
margin: 5px;
}

label {
border: 1px solid green;
display: block;
float: left;
width: 100px;
}

input {
border: 1px solid blue;
}

html:
-----
<div>
<div><label>First Name:</label><input type="text"
name="firstname"></div>
<div><label>Last Name:</label><input type="text"
name="lastname"></div>
</div>

[Spartanicus]

"Lee" <cr*************@yahoo.com> wrote:

I am now following the "reply" posting
conventions.
Appreciated.

That may at best qualify as your perceived solution to a still
unidentified problem. This doesn't help, often a big part of the problem
is that people's perceived solutions are wrong. Until you share the
problem by showing us what you are really trying to do there's not much
we can do for you.

I run into this problem frequently. One example is when creating forms.
If I use a table, then the table width is automatically computed based
on it's contents. However, if go I tableless with css and use divs
instead, then it doesn't work this way.

Forms are typically thought of as tabular data, the use of table markup
is appropriate.
Here is more specific code:

Posting code to the group requires us to open an editor, open a bare
document template, cut and past your code into it, save it and having to
open a browser before we can look at the result. Having done that we
often still miss important info such as server http headers or
differences in the template.

Upload an minimized example using actual content to a webserver and post
the url instead.

--
Spartanicus

[Lee]

Spartanicus wrote:

Forms are typically thought of as tabular data, the use of table markup
is appropriate.
I agree that forms are tabular, but I really like the reduced clutter
that tabless design creates so it would be nice to be able to use
tabless css even with forms.
Posting code to the group requires us to open an editor, open a bare
document template, cut and past your code into it, save it and having to
open a browser before we can look at the result. Having done that we
often still miss important info such as server http headers or
differences in the template.

Upload an minimized example using actual content to a webserver and post
the url instead.

Thanks for the tip. I have uploaded 2 examples:

1. div containing 2 divs containing label and input:
http://www.geocities.com/lonelypuppy123/example1.htm

2. div containing an image:
http://www.geocities.com/lonelypuppy123/example2.htm

In both cases, the divs expand to fill the whole window instead of
being just large enough to enclose the child contents.

[Spartanicus]

"Lee" <cr*************@yahoo.com> wrote:

Forms are typically thought of as tabular data, the use of table markup
is appropriate.
I agree that forms are tabular, but I really like the reduced clutter
that tabless design creates so it would be nice to be able to use
tabless css even with forms.

Reducing code is not a good thing when you use the wrong markup, note
that CSS is there for presentation only. Markup should work without it.
Thanks for the tip. I have uploaded 2 examples:

1. div containing 2 divs containing label and input:
http://www.geocities.com/lonelypuppy123/example1.htm
Use a table.
2. div containing an image:
http://www.geocities.com/lonelypuppy123/example2.htm

In both cases, the divs expand to fill the whole window instead of
being just large enough to enclose the child contents.

What you are still not sharing is what it is that you want to do, if you
want a border around the image then simply apply it to the img element.

--
Spartanicus

[Lee]

Spartanicus wrote:

2. div containing an image:
http://www.geocities.com/lonelypuppy123/example2.htm

In both cases, the divs expand to fill the whole window instead of
being just large enough to enclose the child contents.

What you are still not sharing is what it is that you want to do, if you
want a border around the image then simply apply it to the img element.

I have multiple images and I want a border around the whole group. I
have updated the example to show 2 images:

http://www.geocities.com/lonelypuppy123/example2.htm

[Gus Richter]

Lee wrote:

Spartanicus wrote:

2. div containing an image:
http://www.geocities.com/lonelypuppy123/example2.htm

In both cases, the divs expand to fill the whole window instead of
being just large enough to enclose the child contents.

What you are still not sharing is what it is that you want to do, if you
want a border around the image then simply apply it to the img element.

I have multiple images and I want a border around the whole group. I
have updated the example to show 2 images:

http://www.geocities.com/lonelypuppy123/example2.htm

If your images are on the same line, you can apply display:inline; to
the div in order to limit the div width to the content and also use
vertical-align:bottom; on img in order to bring the images back down to
the bottom from the baseline.

If you want to do this over two lines with border, I believe you are
SOL, unless someone has something up their sleeves.

--
Gus

[Spartanicus]

"Lee" <cr*************@yahoo.com> wrote:

What you are still not sharing is what it is that you want to do, if you
want a border around the image then simply apply it to the img element.

I have multiple images and I want a border around the whole group. I
have updated the example to show 2 images:

http://www.geocities.com/lonelypuppy123/example2.htm

It seems that you are determined not to show us what you are actually
trying to do. This example also makes no sense, if the aim was to do
what is shown there then the answer would be to combine the two images
into one.

I'm bowing out, good luck.

--
Spartanicus

[Lee]

Gus Richter wrote:

If your images are on the same line, you can apply display:inline; to
the div in order to limit the div width to the content and also use
vertical-align:bottom; on img in order to bring the images back down to
the bottom from the baseline.

If you want to do this over two lines with border, I believe you are
SOL, unless someone has something up their sleeves.

Thanks for your advice Gus. I guess I'm going to revert back to using
tables more often.

[Lee]

Spartanicus wrote:

"Lee" <cr*************@yahoo.com> wrote:

http://www.geocities.com/lonelypuppy123/example2.htm

It seems that you are determined not to show us what you are actually
trying to do. This example also makes no sense, if the aim was to do
what is shown there then the answer would be to combine the two images
into one.

I'm bowing out, good luck.

I appreciate all the help you have given me. I am sorry if my examples
didn't make sense. I was just trying to keep them minimal.

In this case, I really do have separate images which I want to put a
border around. I could combine the images into one as you suggest, but
this would be very inflexible for my purposes since I have many
pictures which change frequently so it would be too time consuming for
me to merge all possible combinations of picture sets which I want to
display on the webpage. Also, I have many other layout examples which I
have not posted here in which I need the same table-like width
computation.

Anyway, I think I will start using tables more often since css doesn't
seem to provide what I'm looking for.

Thanks again for your time and help.

[Lee]

Lee wrote:

Gus Richter wrote:

If your images are on the same line, you can apply display:inline; to
the div in order to limit the div width to the content and also use
vertical-align:bottom; on img in order to bring the images back down to
the bottom from the baseline.

If you want to do this over two lines with border, I believe you are
SOL, unless someone has something up their sleeves.

Thanks for your advice Gus. I guess I'm going to revert back to using
tables more often.

Actually, I just found out that if I float the parent div, then it will
behave like tables with the width. This is only a partial solution
though since I can't always use floats.

[Gus Richter]

Lee wrote:

Lee wrote:

Gus Richter wrote:

If your images are on the same line, you can apply display:inline; to
the div in order to limit the div width to the content and also use
vertical-align:bottom; on img in order to bring the images back down to
the bottom from the baseline.

If you want to do this over two lines with border, I believe you are
SOL, unless someone has something up their sleeves.

Thanks for your advice Gus. I guess I'm going to revert back to using
tables more often.

Actually, I just found out that if I float the parent div, then it will
behave like tables with the width. This is only a partial solution
though since I can't always use floats.

Well, like Spartanicus was asking, "what are you actually trying to do"?

--
Gus

[Johannes Koch]

Lee wrote:

Anyway, I think I will start using tables more often since css doesn't
seem to provide what I'm looking for.

.... or, what I'm looking for, is not implemented in Redmond's operating
system component and older browsers.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)