«« FanConcert is Syndicated Page Caching and Personalized Content »»
blog header image
Make a <div> not 100% wide?

Here's a question for my readers:

A <div> usually takes up 100% of the width of the page. How do you make it only take up the width needed by its contents? I've tried using width:1px but that just compresses the contents -- the div literally tries to go to 1 pixel. I don't want to use a fixed width like 500px.

The only workaround I have so far is to put a table around the div. The table only takes the width it needs for the contents and the div inside it only fills the table, not the whole page. An example is the artist page on FanConcert.

I'd rather not have to use a table though. The solution needs to work in the major browsers, any ideas?

Posted at February 23, 2006 at 02:17 PM EST
Last updated February 23, 2006 at 02:17 PM EST
Comments

Could you use a span instead of a div?

» Posted by: Justin Van Patten at February 23, 2006 02:52 PM

I forgot to mention that I'm colouring the background and border of this div.

A span full of content doesn't behave quite the same way as a div, especially when it comes to borders and backgrounds. So I can't use a span instead, unfortunately.

» Posted by: Ryan at February 23, 2006 02:59 PM

My best solution:

div {
display: table;
-display: block; /* IE Only */
-width: 1px; /* IE Only */
}

» Posted by: V. Mardian at February 24, 2006 02:22 AM

How do the browsers know to apply those with IE only?

» Posted by: Ryan at February 24, 2006 07:54 AM

Is it only understood by IE and the other browsers just ignore it?

» Posted by: Jim at February 24, 2006 08:42 AM
Google
 
Search scope: Web ryanlowe.ca