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. 15 20713
"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
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.
"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
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>
"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
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.
"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
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
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
"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
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.
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 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.
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
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.) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: SoloCDM |
last post by:
How do I keep my entire web page at a fixed width?
*********************************************************************
Signed,
SoloCDM
|
by: effendi |
last post by:
Hi everyone
Sorry to ask such a simple question. I created a table with 18 columns-
16 of which represent weeks starting from 1 to 16. In each cell I have
a field which takes either a Null value...
|
by: Stewart |
last post by:
Originally posted in comp.lang.javascript:
Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 23 Aug 2005 02:50:04 -0700
Local: Tues, Aug 23 2005 10:50 am
Subject: FireFox, RemoveChild,...
|
by: Jeremy |
last post by:
I have googled for this issue, and many other people have the same problem
with no resolution. The data grid column sizes automatically resize based
on their contents no matter what the...
|
by: Leo |
last post by:
I would like to set my customized control's layout to be the layout of
the page in ASP.NET. Is there any way to get the width and height of
the page thus I can set my control's width and height to...
|
by: Mike Fellows |
last post by:
Below is my code that is carried out on my dataset, datagrid etc...
Im trying to get column0 "Date & Time" to show date and time, not just date
ive read some stuff posted by Dmitriy Lapshin on...
|
by: Shadow Lynx |
last post by:
Consider this simple HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>...
|
by: ADezii |
last post by:
This week’s Tip of the Week will clearly demonstrate how you can dynamically set the Drop Down List Width of a Combo Box to the length of the longest item in its Row Source. The inspiration for this...
|
by: labmonkey111 |
last post by:
I'm trying to get a list of page links for a report, and I'm running into a problem with IE. I have a group of nested left-floating DIVs for the page menu, inside a table. Firefox expands the size of...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM).
In this month's session, the creator of the excellent VBE...
|
by: MeoLessi9 |
last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: Aftab Ahmad |
last post by:
Hello Experts!
I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
| |