How can I shrink a <div> to its content, while still having it centered?

Maybe you should try a <span> instead of a div… that should shrink to it’s width by default. (Or you could give your div display:inline;).

To make a div not stretch, I think you need to give it a width, in either px or %, but that doesn’t sound like what you want.

Set your margin right and left to auto and set the width to whatever you need for it to be.

ben, I need a block level element to center it….

glial, I don’t need the width to be a specific amount, I need it to be as much as its content, which is a variable value…

I’m not sure if there’s a cross-browser way of doing this… you could try setting the text-align property of the enclosing div, but my recollection is that this will only work in IE.

Why don’t you want to specify the width?

A div by default is a block level element. It will fill the browser window.
A span is an inline element and will collapse around the content.
Both of these behaviours can be over written by explicitly defining display: block or display: inline on either element.

If you set the margin on the div as follows

body {font-size: 10px;} div {margin: 0 5em;}

You will get a div that keeps 50px (1em = 10px based on the body font-size declaration) on either side of it and fills the browser window. Modify the margin value to your desire. This will work for any modern browser (IE7, FF, Safari, Camino, Opera, etc…)

For IE 6 you will need to add a specific rule for the body tag as follows:

body {text-align: center;}

That will take care of it.

Sorry, I meant to answer the part about shrinking the div to fit. The only way to do that is to display:inline on the div for all browsers. But then you run into the fact that it is no longer a block level element, so things like borders and padding become an issue.
Float will also achieve this, but most times when you float something, you set it to display: block as well when it is an element like a DIV. Float also gives you the left / right only options, so this clearly won’t solve your problem.

You could do something like this:

div {min-width: 100px; padding: 10px;}

Then for IE 6, you could add a specific rule as follows:

div {width: 100px;}

IE 6 treats width and height values as minimum values and then expands the div as needed.

Do you have a link to illustrate what you are trying to achieve?

andrew, I don’t want to specify the width because I don’t know it, the contents is of variable width….

pixelplumber, this is the page, the text currently says “Site Me You”. Note that I did not make it, it was someone who asked me for help, and he has made some other changes trying it out since I asked this question.

Also, I’m not sure what exactly you’re trying to say. I knew about the margin: 0 auto; trick to center something, but that only works for block level elements. I believe min-width did not make sure it would just expand the div as needed.

@vincentt: Looking at the site, I don’t see why you can’t specify widths; it looks like a fairly standard fixed-width layout that just needs to be centered.

You could do some sort of liquid layout, but why sacrifice the vertical spacing of your text if someone has a really wide screen? Obviously you need a margin of some sort (otherwise centering would be irrelevant), and the notion of a margin means that you have a width set somewhere… even if it’s in percentages (or even better, ems).

I know this doesn’t totally answer your question, but it sounds like a design issue rather than a css one.