How to shrink border to content

mkrausnick · Mar 2, 2006

With this code:

Code:

<html>
<head>
<style type="text/css">
#container {  margin: 0 auto; text-align: center; border:2px solid}
</style>
<body>
<div id="container">
page content goes here
</div>
</body>
</html>

I get nice self-centering text, but horizontally the border spans the entire width of the screen.

I want the border to "shrink to fit" the content so there's a small box in the center just large enough to contain the content.

How do I do that?

Thanks greatly.

Mike Krausnick
Dublin, California

kaht · Mar 2, 2006

Floating the element will cause the border to shrink to the content, but then you lose your centering. You could apply a left margin to get it near the center, but that's as close as you're gonna get using that route.

Another option is to encapsulate it in an inline element (like a span) instead of a block level element like a div - and then applying text-align:center to the parent element. The drawback to this is that you get a box around each line if the content spans multiple lines.

The 3rd option is to define an explicit width on the div, but from the sounds of it that won't work for you either - but it might get you closer than it spanning the entire screen.

That's about as close as you're going to get unfortunately.....

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

mkrausnick · Mar 3, 2006

Thanks Kaht for the prompt response.

After some more experimenting, I came up with this, which works:

Code:

<html>
<head>
<style type="text/css">
.container {  margin: 0 auto; text-align: center; border:2px solid}
</style>
</head>
<body>
<div align="center">
<table><tr><td>
<p class="container">page content goes here</p>
</td></tr></table>
</div>
</body>
</html>

I hate having to use a table for formatting, and it's not XHTML Strict. However, it gets the job done.

If anyone has another table-less idea, I'd be appreciative.

Mike Krausnick
Dublin, California

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to shrink border to content

mkrausnick

Programmer

kaht

Programmer

mkrausnick

Programmer

Similar threads

Part and Inventory Search

Sponsor