473,551 Members | 2,851 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.

Oct 16 '05 #1
15 20729
"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
Oct 16 '05 #2
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.

Oct 17 '05 #3
"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
Oct 17 '05 #4
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>Fir st Name:</label><input type="text"
name="firstname "></div>
<div><label>Las t Name:</label><input type="text"
name="lastname" ></div>
</div>

Oct 19 '05 #5
"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
Oct 19 '05 #6
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.

Oct 19 '05 #7
"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
Oct 19 '05 #8
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

Oct 20 '05 #9
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
Oct 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

179
44270
by: SoloCDM | last post by:
How do I keep my entire web page at a fixed width? ********************************************************************* Signed, SoloCDM
8
8225
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 or and "X". Since I only have at most one (1)character, I would like to make the td with as small as possible. I have placed width="5px" but it...
2
1450
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, AppendChild, making width grow? Hi,
5
329
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 Style.Width is set to. I was looking at the HTML output, and the values I entered for Width does not even get generated. And to make things worse, even...
2
1453
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 them? Thanks.
7
1420
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 this board that goes way over my ability (this is my first vb or vb.net project). from what I can tell i need a GridColumnStyles collection...
50
6017
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> <title>Strict kills my widths!</title> </head> <body> <table style="width:400px; table-layout:fixed;">
30
26462
ADezii
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 Tip came from one of our own resident Experts, mshmyob. In response to a Thread relating to this very Topic, mshmyob came up with a rather ingenious...
0
1806
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 the table to see the entire menu, but IE does not, the last few are cut off. After a couple of hours of testing, I have determined that IE is not...
0
7565
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7492
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8002
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7522
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6106
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5406
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5130
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3534
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1097
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.