title: How to fit css textbox to content?
body: <p>My CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body {
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-image: url(images/angel-beats-bg1.jpg);
      background-repeat: no-repeat;
      margin: auto;
      width: auto;
      height: auto;
      display: table;
      text-align:center;
  }
  .TextBOx {
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      border: #solid 30px #000;
      background-color: rgba(105,100,100,0.8);
      width:auto;
      height:auto;
      margin: 0;
      display:block;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Let this picture explains everything:
  <img src="https://i.stack.imgur.com/i1qB0.jpg" alt="enter image description here"></p>
  
  <p>I want the border of that semi transparent textbox to autofit with that content. How do I do that ? I've tried <code>position:fixed;</code> but instead it screws up my page.</p>
  
  <p>My complete script:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body {
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-image: url(images/angel-beats-bg1.jpg);
      background-repeat: no-repeat;
      margin: auto;
      width: auto;
      height: auto;
      display: table;
      text-align:center;
  }
  .TextBox {
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      border: #solid 30px #000;
      background-color: rgba(105,100,100,0.8);
      width:auto;
      height:auto;
      margin: 0;
      z-index:-1;
      display:block;
      text-align:center; 
      position:relative;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;img src="images/header.png" alt="OpenWrt Gratisan"&gt;&lt;br&gt;
  &lt;strong&gt; 
  &lt;p&gt;
  &lt;a href="status.php" title=""&gt;&lt;font color="red"&gt;Status&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="wget.php" title=""&gt;&lt;font color="red"&gt;Wget WebUI&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="putty.html" title=""&gt;&lt;font color="red"&gt;Terminal&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="wifi.php" title=""&gt;&lt;font color="red"&gt;WIFI&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="ch_pass.php" title=""&gt;&lt;font color="red"&gt;Password&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="profile.php" title=""&gt;&lt;font color="red"&gt;Profile&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="vpn.php" title=""&gt;&lt;font color="red"&gt;Accounts&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="ussd.php" title=""&gt;&lt;font color="red"&gt;USSD&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="sms_in.php" title=""&gt;&lt;font color="red"&gt;Inbox SMS&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="sms_send.php" title=""&gt;&lt;font color="red"&gt;Send SMS&lt;/font&gt;&lt;/a&gt; | 
  &lt;/p&gt;
  &lt;p&gt;
  &lt;a href="vpn_log.php" title=""&gt;&lt;font color="red"&gt;VPN log&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="restart_log.php" title=""&gt;&lt;font color="red"&gt;Restart Log&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="wget_log.php" title=""&gt;&lt;font color="red"&gt;Wget Log&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="dial_log.php" title=""&gt;&lt;font color="red"&gt;Dial Log&lt;/font&gt;&lt;/a&gt; | 
  &lt;a href="about.php" title=""&gt;&lt;font color="red"&gt;About&lt;/font&gt;&lt;/a&gt;
  &lt;/p&gt;
  &lt;/font&gt;&lt;/strong&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div class="TextBox"&gt;';
  MY CONTENT GOES HERE
  &lt;/div&gt;
  .....
  </code></pre>