Запретить div принимать 100% ширину

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

У меня проблема: границы внутреннего div достигают всей ширины страницы, но я хочу, чтобы они только кадрировали содержимое внутри них. Если я использую: display: inline границы рамки каждой строки отдельно и перекрываются, так что это не работает - может ли кто-нибудь помочь?

P.S стиль не объявляется как это в исходном документе, а в таблице стилей

Ответ 1

Назначить ширину абсолютно позиционированному элементу? Если вы ищете термоусадочную пленку, float:left или display:inline-block идеально подходят для этого.

Ответ 2

Попробуйте display:inline-block, он всегда помогает мне в таких ситуациях.

http://jsfiddle.net/FaYLk/

Ответ 3

Не так просто:

display: inline-block;

Вы должны сделать больше, чтобы перекрещивать браузер.

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

Ответ 4

Поместите контейнер вокруг всего содержимого. Например

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