 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2005DIV that auto-sizes?
Hello, Is there a way to have a div size itself to the width of its contents? "width:auto" does not work. The div contains a UL and I want the div to fit the longest line in the list. The div is centered.  Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > Is there a way to have a div size itself to the width of its contents? The table-cell, inline-block or inline-table values for the display property would achieve that, browser support varies. >"width:auto" does not work. It's not supposed to. SignatureSpartanicus >> Is there a way to have a div size itself to the width of its contents? > > The table-cell, inline-block or inline-table values for the display > property would achieve that, browser support varies. Only by setting both the div and ul to display:table-cell did the shrink to fit work. Only now the div completely ignores the margin:auto. :-( And, of course, it looks differently in IE and Mozilla. Demo URL: <http://www.sohnen-moe.com/test/test.html> Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > Only by setting both the div and ul to display:table-cell did the > shrink to fit work. Only now the div completely ignores the margin:auto. > :-( And, of course, it looks differently in IE and Mozilla. Try text-align:center on a container instead of margin:auto on the div. You've changed the div from block to in-line and they work differently. You might try putting around the element if it doesn't respond to the text-align:center. We'll never get past the IE/other thing though. SignatureStan McCann "Uncle Pirate" http://stanmccann.us/pirate.html Webmaster/Computer Center Manager, NMSU at Alamogordo Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg A zest for living must include a willingness to die. - R.A. Heinlein >>> Is there a way to have a div size itself to the width of its contents? >> [quoted text clipped - 4 lines] >shrink to fit work. Only now the div completely ignores the margin:auto. >:-( Table cells can't have margins, tables can (use display:table). >And, of course, it looks differently in IE and Mozilla. The only way around that is to code it as an inline-block for IE, and a css table for proper browsers: http://www.spartanicus.utvinternet.ie/test/jim.htm SignatureSpartanicus >>>> Is there a way to have a div size itself to the width of its contents? >>> [quoted text clipped - 5 lines] > > Table cells can't have margins, tables can (use display:table). display:table works quite nicely with Mozilla. Not IE, as you noted. Your suggestion of special IE conditionals is an interesting workaround to the browser's limitations. One I am not willing to have cluttering my pages. So I have decided, "Screw the Purity Of Essence, I am using a table for layout." A table is standard, and it works for existing browsers (IE, Moz, Opera). In 10 years when IE catches up to trailing edge tech and IE6 is hardly used, I'll remove the table. Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > So I have decided, "Screw the Purity Of Essence, I am using a > table for layout." A table is standard, and it works for existing > browsers And that's *exactly* what's wrong with using tables for layout. They "work" - in the sense of imposing the author's idea of a suitable layout for a limited range of browsing situations - even when that layout is counter-productive. And browsers can't, in general, know whether the table is meant to be expressing an inherent relationship between the cells (in which case the best compromise may be to retain the table layout, scrollbars and all), or merely a suggestion which would be better ignored when the browsing situation could benefit from that. >> So I have decided, "Screw the Purity Of Essence, I am using a >>table for layout." A table is standard, and it works for existing [quoted text clipped - 4 lines] > layout for a limited range of browsing situations - even when that > layout is counter-productive. HTML+CSS is supposed to assist in "imposing the author's idea of a suitable layout," not prohibit it. It is not the layout which is counter-productive; it is the lack of multi-browser support which, I suppose, could be considered a "limited range of browsing situations." I had no success using CSS to convince the browsers to treat a block of formatted text (the UL) as a block. So it came to: "Which ugly hack should I use?" I chose one that at least conforms to (generally supported) standards rather than a browser-specific one. Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > > And that's *exactly* what's wrong with using tables for layout. > > They "work" - in the sense of imposing the author's idea of a > > suitable layout for a limited range of browsing situations - even > > when that layout is counter-productive. > > > HTML+CSS is supposed to assist in "imposing "Proposing", yes. "Imposing", no. Confucius say "force does not work on the WWW". (Well, he would've done, I reckon...) > the author's idea of a suitable layout," not prohibit it. Eh? > It is not the layout which is counter-productive; it is the lack > of multi-browser support CSS is optional, by design. In situations where the proposals make no sense (for example, text colour on a speaking browser) the CSS proposals are going to be ignored anyway. By grasping that principle, and capitalising on it, more-flexible and accessible web designs emerge. > So it came to: "Which ugly hack should I use?" Does it? To me it comes down to "can I really risk my substantive content to the vagaries of browser behaviour for the sake of this particular design feature - maybe it would be safer to do without it?". > I chose one that at least conforms to (generally supported) > standards Table layout violates at least one important "standard": the WAI guidelines. > "Proposing", yes. "Imposing", no. Confucius say "force does not work > on the WWW". (Well, he would've done, I reckon...) Mr Lee or Mr Wang? > Table layout violates at least one important "standard": the WAI > guidelines. In fact, WCAG 1.0 allows using HTML tables for layout unless they don't make sense when linearized. HTML 4 says, that you should not use tables purely for layout. SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) > > Table layout violates at least one important "standard": the WAI > > guidelines. > > In fact, WCAG 1.0 allows using HTML tables for layout unless they > don't make sense when linearized. Let's have that in context! In fact, WCAG 1.0 section 5 says: Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). I think that's clear enough. Item 5.3 conceded, at the time it was written: 5.3 Do not use tables for layout unless the table makes sense when linearized. [...] Note. Once user agents support style sheet positioning, tables should not be used for layout. Those guidelines were developed prior to their publication in May 1999. Some years have passed since then! If there's any argument to be made, it's about the precise meaning of "Once user agents support style sheet positioning", and whether that time has yet come. "Positioning" in the sense of floating is surely working already, and has been for quite some time, in browsing situations where it makes any sense, and it does little harm in situations where it's not supported or where it isn't helpful. "Positioning" in the sense of precise placement on the canvas is tricky, and in the general WWW context is best avoided anyway, IMHO. So, I say that time is long since here, and the 1999 interim solution is no longer appropriate (at least for new designs). YMMV. > Let's have that in context! In fact, WCAG 1.0 section 5 says: > [quoted text clipped - 3 lines] > > I think that's clear enough. ACK > Item 5.3 conceded, at the time it was written: > > 5.3 Do not use tables for layout unless the table makes sense when > linearized. [...] > Note. Once user agents support style sheet positioning, tables > should not be used for layout. You are right. > Those guidelines were developed prior to their publication in May > 1999. Some years have passed since then! Unfortunately, some WAI people still cited this (5.3) very strongly in February 2004 to show that WCAG 1.0 allow layout tables. SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) >> HTML+CSS is supposed to assist in "imposing > [quoted text clipped - 4 lines] > > Eh? Hey, they are *your* words. Once again, it is a matter of practicality, of choosing the change the design to conform to browser limitations, or using what browsers currently support now (and in the future) to implement the desired design. >>I chose one that at least conforms to (generally supported) >>standards > > Table layout violates at least one important "standard": the WAI > guidelines. Guidelines vs standards. Hmm. . . Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > > Table layout violates at least one important "standard": the WAI > > guidelines. > > Guidelines vs standards. Hmm. . . It's OK, I know what you're trying to do. A process of attrition over terminology, in the hope of losing sight of the issue. You're doing fine with that so far. Try to get this straight. The only formal /standard/ you'll find, anywhere near this context, is ISO HTML. After that, you're left with Technical Recommendations, such as http://www.w3.org/TR/html401/struct/tables.html "Tables should not be used purely as a means to layout document content" [...] , and Guidelines such as the WAI. Sure: in the end, it's your choice what you do with those, as an author. And it's your readers' choice what they'll do with what you authored. We just discuss some of the issues which might arise. > Hello, > Is there a way to have a div size itself to the width of its contents? > "width:auto" does not work. > The div contains a UL and I want the div to fit the longest line in > the list. The div is centered. read a few postings back, 26 jan http://groups-beta.google.com/group/comp.infosystems.www.authoring.stylesheets/b rowse_frm/thread/441fb553016b833d/f5ab59977f6cd143?q=re:+center+div%3F+ali+babba &_done=%2Fgroups%3Fq%3Dre:+center+div%3F+ali+babba%26&_doneTitle=Back+to+Search& &d#f5ab59977f6cd143 could help you >> Is there a way to have a div size itself to the width of its >> contents? "width:auto" does not work. [quoted text clipped - 3 lines] > read a few postings back, 26 jan > http://groups-beta.google.com/group/comp.infosystems.www.authoring.stylesheets/b rowse_frm/thread/441fb553016b833d/f5ab59977f6cd143?q=re:+center+div%3F+ali+babba &_done=%2Fgroups%3Fq%3Dre:+center+div%3F+ali+babba%26&_doneTitle=Back+to+Search& &d#f5ab59977f6cd143 Yes, I saw that. It does not work for a contained UL. Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > Hello, > Is there a way to have a div size itself to the width of its [quoted text clipped - 3 lines] > the > list. The div is centered. <div id="one"> <ul> <li><div id="two"><text></div></li> </ul> </div> div#one {width:800px;} div#two {width:100%; text-align:center;} Division one is the container for your UL. Division two is set at 100% so it will also be 800px wide. To indent a little: div#two { margin-left:5%; width:95%;} To center it div#two {margin-left:5%; margin-right:5% width:90%;} And of course, div#two {margin:5%; width:90%} >> Is there a way to have a div size itself to the width of its >> contents? > >div#one {width:800px;} So width: 800px means size itself to the width of the contents? Try to at least read the question before posting your drivel. Steve Signature"My theories appal you, my heresies outrage you, I never answer letters and you don't like my tie." - The Doctor Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> > >> Is there a way to have a div size itself to the width of its > >> contents? > So width: 800px means size itself to the width of the contents? Try to > at least read the question before posting your drivel. But the question remains, and for me is an interesting one, although in my case, I'd like the div vertical size to adjust itself to the amount of a fixed-width text, so that if more text is entered, the vertical size of the div will increase. SignatureHaines Brown >> >> Is there a way to have a div size itself to the width of its >> >> contents? [quoted text clipped - 3 lines] > >But the question remains, As other people have said there are several ways to create 'shrink to fit' blocks in CSS. CSS tables are the best way but IE doesn't support them. Under CSS 2.1 floats also behave like this but not under CSS 2 (and Mac IE follows the CSS 2 rules). >and for me is an interesting one, although >in my case, I'd like the div vertical size to adjust itself to the >amount of a fixed-width text, so that if more text is entered, the >vertical size of the div will increase. Um, that's the default. Steve Signature"My theories appal you, my heresies outrage you, I never answer letters and you don't like my tie." - The Doctor Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> >>>> Is there a way to have a div size itself to the width of its >>>>contents? [quoted text clipped - 6 lines] > amount of a fixed-width text, so that if more text is entered, the > vertical size of the div will increase. is this a jukebox or what ?! apparently it is. as i just said, the solution was given just 3 days ago. so for the very hesitating or simply mentally poor, follow the link, and check post #26 (in google numbering) >> >> Is there a way to have a div size itself to the width of its >> >> contents? >> So width: 800px means size itself to the width of the contents? Try to >> at least read the question before posting your drivel. > But the question remains, and for me is an interesting one, although > in my case, I'd like the div vertical size to adjust itself to the > amount of a fixed-width text, so that if more text is entered, the > vertical size of the div will increase. Do not define a height for either division. Although you can define a height for div#two initially. Just to show something. The height will automatically adjust as needed. If you have nothing in the division to begin with, the division will appear to be nonexistant. As soon as something is in it, it expands as needed. The width remains the same as you have defined that. >Hello, > Is there a way to have a div size itself to the width of its contents? >"width:auto" does not work. > The div contains a UL and I want the div to fit the longest line in the >list. The div is centered. I've not tried grappling with ULs like that, but with headings I find things like width: 0em; white-space: nowrap; will usually do what I want in IE6 and Firefox. -- Mark |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.