title: HTML: Can't get DIV to wrap tightly around inner divs
body: <p>I've looked around StackOverflow for some solutions, and so far none of them are working. 
  I'm trying to get my span to wrap tightly around its interior divs, but it always goes just a little bit wider than the divs inside. I've tried the different DISPLAY, FLOAT, MARGIN, and PADDING properties with no luck. </p>
  
  <pre><code>#column1, #column2, #column3
  {
    display:block;
    float:left;
    width:33%;
    height:100vh;
    text-align:center;
    border: 1px solid black;
  }
  
  #weather_header
  {
    width:70%;
    border: 5px outset skyblue;
    background-color: skyblue;
    color: white;
  }
  
  #weather_body
  {
    width:70%;
    border: 5px inset skyblue;
    background-color: lightblue;
    color: black;
  }
  
  #clock_header
  {
    width:70%;
    border: 5px outset skyblue;
    background-color: skyblue;
    color: white;
  }
  
  #clock_body
  {
    width:70%;
    border: 5px inset skyblue;
    background-color: lightblue;
    color: black;
  }
  
  div.widget_box
  {
    display: inline-block;
    border: 1px solid black;
  }
  
  div.widget_header
  {
    float:left;
    text-align:left;
    padding: 5px 10px;
    display:inline-block;
    border-radius:8px 8px 0 0;
    font-weight:bold;
  }
  
  div.widget_body
  {
    float: left;
    padding: 10px;
    display: inline-block;
    border-radius: 0 0 8px 8px;
    text-align:center;
    margin: 0 auto;
  }
  
  body {height:100vh;}
  html {height:100vh;}
  </code></pre>
  
  <p>Basically the widget_box class holds the header and body classes. I just want the span's width to match the width of the div boxes (which will contain widgets of varying size).</p>
  
  <p>Any help you could offer would be most appreciated!</p>
  
  <p>Edit: HTML Code</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
   &lt;title&gt;Dashboard &lt;/title&gt;
  
   &lt;!--Importing JQuery into page--&gt;
   &lt;script type="text/javascript" src="jquery-1.7.2.js"&gt;&lt;/script&gt;
  
   &lt;!--Importing Stylesheet into page--&gt;
   &lt;link type="text/css" href="dashboard_stylesheet.css" rel="stylesheet"&gt;&lt;/link&gt;
  
  &lt;/head&gt;
  
  &lt;body bgcolor = "white"&gt;
  
  &lt;div id="column1"&gt;
  
      &lt;div class="widget_box"&gt;
  
          &lt;div class="widget_header" id="weather_header"&gt;Weather&lt;/div&gt;
  
          &lt;div class="widget_body" id="weather_body"&gt;
              &lt;script type="text/javascript" src="http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&amp;tStyle=whteYell&amp;logo=1&amp;zipcode=73127&amp;lang=eng&amp;size=9&amp;theme=blue&amp;metric=0&amp;target=_self"&gt;&lt;/script&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="widget_box"&gt;
  
          &lt;div class="widget_header" id="clock_header"&gt;World Clock&lt;/div&gt;
  
          &lt;div class="widget_body" id="clock_body"&gt;
  
              &lt;div align="center" style="margin:15px 0px 0px 0px;background:#000000;width:200px;padding:12px"&gt;
  
                  &lt;noscript&gt;
                      &lt;div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"&gt;
                      &lt;a style="padding:2px 1px;margin:2px 1px;font-size:12px;line-height:16px;font-family:arial;text-decoration:none;color:#000" href="http://localtimes.info"&gt;World Time &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/noscript&gt;
              &lt;script type="text/javascript" src="http://localtimes.info/world_clock.php?widget_number=11002&amp;cp3_Hex=FF0000&amp;cp2_Hex=000000&amp;cp1_Hex=FFFFFF"&gt;&lt;/script&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="column2"&gt;Column 2&lt;/div&gt;
  &lt;div id="column3"&gt;Column 3&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>