prevent div's from taking 100% width

Question

<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;">

  <div style="
         border: 2px solid black;
         margin: 0 auto;
         text-align: center;
         padding: 3px;">

    Hello<br />Hola

  </div>

  <div style="
         border: 2px solid black;
         margin: 0 auto;
         text-align: center;
         padding: 3px;">

    Another Sentence

  </div>

</div>

I have a problem: the borders of the inner div's reach over the whole width of the page, but i want them to only frame the content inside them. If i use: display: inline the borders frame each line separately and overlap, so that doesn't work - can somebody help?

P.S the style's aren't declared like this in the original document but in a stylesheet

Answer 1

Assign a width to the absolutely positioned element? If you're looking for shrink-wrapping, float:left or display:inline-block are perfect for that.

Answer 2

Try display:inline-block, it always helps me in situations like this.

http://jsfiddle.net/FaYLk/