centering a <div> of unknown width [Archive]

tim314

09-17-2009, 06:56 PM

I have a <div> that contains some dynamically generated content. If I knew its width, I could center it like this:

<div style="border: 1px solid black; width: 600px; margin-left: auto; margin-right: auto;">

However, I want it to resize itself to the width of its content.

I can do this by adding "float: left;" to the style attribute, but this causes "margin-left: auto; margin-right: auto;" to stop working.

Is there any way to get both the centering and the auto-sizing?

Thanks in advance.

coothead

09-18-2009, 06:17 AM

Hi there tim314,

and a warm welcome to these forums. ;)

Here is one possible solution...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#outer {
position:relative;
float:right;
right:50%;
}
#inner{
position:relative;
float:left;
left:50%;
padding:10px;
border:1px solid #000;
}
#inner pre {
font-family:verdana,arial,helvetica,sans-serif;
font-size:1em;
color:#000;
}
</style>

</head>
<body>

<div id="outer">

<div id="inner">
<pre>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</pre>
</div>

</div>

</body>
</html>

coothead