473,718 Members | 2,030 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Can a div's width expand to fit content's width?

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Dave
Apr 8 '08
50 7202
Hi Berg

On 10 Apr, 05:19, Bergamot <berga...@visi. comwrote:
>I'd call IE out of touch, for not supporting the properties that give the
results you are really after - display:table etc.
True ...

Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

That's done on purpose because of IE6's bugs when in strict mode. IE7
is running in strict mode though. And this has no effect on this
particular uissue.

Dave
Apr 10 '08 #11
Dave Rado wrote:
On 10 Apr, 05:19, Bergamot <berga...@visi. comwrote:

>Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.


That's done on purpose because of IE6's bugs when in strict mode. IE7
is running in strict mode though. And this has no effect on this
particular uissue.
Any reason why you are using XHTML? Bet not...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Apr 10 '08 #12
Dave Rado wrote:
Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?
Use float is the only way I know of and include IE, else you must
specify a width... simple examples

http://www.littleworksstudio.com/tem....20080410.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Apr 10 '08 #13
On 10 Apr, 16:16, "Jonathan N. Little" <lws4...@centra l.netwrote:
Any reason why you are using XHTML? Bet not...
See for example:
http://www.w3schools.com/xhtml/xhtml_why.asp

Dave
Apr 10 '08 #14
On 10 Apr, 17:26, "Jonathan N. Little" <lws4...@centra l.netwrote:
Dave Rado wrote:
Hi
I've created a banner with a drop-shadow using a div - there's a mock-
up athttp://tinyurl.com/6n7czu. The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Use float is the only way I know of and include IE, else you must
specify a width... simple examples

http://www.littleworksstudio.com/tem....20080410.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorks Studio.com
Floats don't meet my requirement for reasons discussed earlier in the
thread (the boxes have to be shrink-to-fit *and* centred). I've got it
working using tables though.

Dave
Apr 10 '08 #15
Dave Rado wrote:
Why does Dreamweaver give you an xhtml transitional doctype by default
then?
Hmmm good one, it's self-answering ;-)

I don't use WYSIMWYG (What You See Is Maybe What You Get) editors, but I
believe you can set DW to code HTML 4.01 Strict

And given that I've already marked up several hundred webpages
in valid xhtml, with closing /tags for images etc., is it really
worth the many hours of work it would take to change it back now?
Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Apr 10 '08 #16
Dave Rado wrote:
>
Why does Dreamweaver give you an xhtml transitional doctype by default
Because it's trendy, nothing more.

--
Berg
Apr 10 '08 #17
On 2008-04-09, Dave Rado <da*******@dsl. pipex.comwrote:
Hi Ben

On 9 Apr, 21:43, Ben C <spams...@spam. eggswrote:
>You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

which has a possible workaround for IE.

Yes, floats are out of the question because as you say, it needs to be
horizontally centred. It bugs me that W3C don't think the ability to
centre floats is worthwhile - it makes them seem rather out of touch,
to me.
More useful would be if you could set width: greedy or width:
shrink-to-fit on any block-level element.

Then you wouldn't have to use float or table-cell etc. just for the
shrink-to-fit side-effect and then have to work around the effect so to
speak.

I think something like this has been proposed for CSS 3.

But centre floats would be interesting-- presumably you'd interrupt each
line either side of the float.
I've got it working using tables, now - by making a table's background
colour provide the drop-shadow and then offsetting a div within the
table. It works great, but it uses two single-cell tables, one to
provide the drop-shadow with a dynamic width, with an offset div
inside that, and then a second single-celled table within that div to
provide the vertical centring. Bit clunky but it works (see my mock-up
at http://tinyurl.com/5k8hdy).

Re. the workaround you linked to for the fact that IE doesn't support
display: table, I'm not sure whether it can be made to work in this
context - part of my problem is that I don't really understand the
workaround. See my failed attempt to get it working at
http://tinyurl.com/6kvjtn , which works in Firefox but not in IE.

Can you see any way to tweak the code in my mock-up at
http://tinyurl.com/6kvjtn so that the banner looks the same as the
mock-up at http://tinyurl.com/5k8hdy in all browsers?
I don't know anything about IE so can't help you with that.
Apr 10 '08 #18
On 2008-04-10, Dave Rado <da*******@dsl. pipex.comwrote:
[...]
Why does Dreamweaver give you an xhtml transitional doctype by default
then?
Does it actually generate valid xhtml?
Apr 10 '08 #19
Hi Jonathan

On 10 Apr, 19:11, "Jonathan N. Little" <lws4...@centra l.netwrote:
Well since they are most likely being incorrectly served as text/html,
yes. Also since most likely your pages are semi-xhtml a little parsing
with sed could fix them in a flash. I am sure someone here knows of an
xhtml stripping utility...

At the very least don't perpetuate your mistake by continuing to create
your new pages as xhtml...
I still don't understand what problems it will cause me that are
serious enough to justify changing back.

Dave
Apr 10 '08 #20

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

Similar topics

1
13956
by: Glabbeek | last post by:
I'm changing the layout of my site. Instead of using tables, I will use DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not the correct width. Mozilla and Opera are showing the page the way I want. Does anybody know a solution for this? First of all, the code I am using: CSS ------- body {
3
4362
by: tungchau81 | last post by:
Hi, A Modal Dialog does not allow us to highlight the text content inside <DIV> tag unless I use a <textarea> tag to display that text content. However, the situation of my software makes it impossible to use <textarea> and Modeless dialog. I am really stuck!!! Is there any trick to make <DIV> or <SPAN>'s content be selectable in a Modal dialog? Thanks in advance,
5
7884
by: Bob Imperial | last post by:
Hi folks! In need of some enlightenment here, I'm trying to get my wrapper div to expand to accommodate height-wise, to whatever content is placed in it, no luck yet and I realize it's probably something simple, I just don't see it yet. I have the following: <div style="width:600px; border:1px solid #999933;"><!-- wrapper --> <div style="width:150px;float:left;padding-left:4px;">Title</
5
13518
by: Agix | last post by:
Hi there, Please check out : http://clarifysolutions.co.uk/certenroll/ The source is included below. This page is a test, so I can play about with paddings, margins and layouts using divs as semantically meaningless containers for bunch's of other elements - like everyone keeps telling me to make my code standards compliant. This request is not because I want a fix, but because I want to
3
3037
by: Kai Rosenthal | last post by:
Hello, I have two or more div elements which have the same min-width. <div class="wrapper"> <div class="element01">text01</div> <div class="element02">text02</div> ... </div> In a browser with normal font size all div elements have the same
3
4139
by: Max58kl | last post by:
Hi I am currently trying to create a FAQ webpage. At the moment the code I have lets me click on the Questions which successfully shows and hides the <DIV> tags containing the Answers. But what I would like is to have the answers also collapse and expland, similar to the small plus and minus signs in Window Explorer. I'm sure it can be done using the CSS rules display: block; and display: none but I'm not sure how to implement it...
6
12819
by: AJM Project | last post by:
Hello, I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline & embedded CSS just now as It's just a quick test page I'm working on. Basically I've got my container div, two other div columns inside with fixed widths. In the 2nd column I have 2 divs, one is under the other, which exceeds the size of the...
1
7260
by: Chris Rock | last post by:
I have a "Looped Slider" that displays a series of images, but I've had to manually resize the images (using height/width tags), but I'm looking for some code that will take the width of the DIV, and resize/adjust the height/width of the images automatically. Here is the code for the looped slider: <div id="loopedSlider" class="feature"> <div class="container"> <div class="slides">
0
8827
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8724
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9121
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 most users, this new feature is actually very convenient. If you want to control the update process,...
0
7991
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6654
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5971
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4481
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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3182
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2123
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.