防止div占用100％的宽度

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?

PS 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/

Answer 3

Its not as simple to just do:

display: inline-block;

You must do more than that to cross browser this.

display: inline-block;
display: -moz-inline-stack; /* for firefox 2 */
*display: inline; /* for ie 6 and 7 */

Answer 4

Put a container around all the content. Eg

<div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div>
.container{ display: inline-block; }