title: Html layout and have the body content extend past the set width and remain on same line
body: <p>I have a layout with header, footer, body content.  It is a pretty standard layout.  We have reports that sometimes extend past the hard coded width'  But we need the left nav and the body content to the same line.  With this HTML code below, if the width extends too far (say there is a content in the body that has more than 900+ width) then the body content flows below the left nav.</p>
  
  <p>Basically, we want the content and left nav to remain on the same row regardless how much content is actually in that body content section.  Is there a way to force the browser to keep those to items on the same row ALWAYS.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;style type="text/css"&gt;
  
              #bodyFull {
  
              }
  
              #header {
                  border: 3px solid #f00;
                  background-color: #99F;
                  width: 900px;
              }
  
              #footer {
  
                  border: 3px solid #909;
                  background-color: #F99;
                  width: 900px;
  
              }
  
              #leftNav {
                  float: left;
                  width: 150px;
                  height: 800px;
                  border: 2px solid #777;
                  background-color: #FF9;
              }
  
              #bodyContent {
                  float: left;
  
                  border: 2px solid #707;
                  background-color: #AAA;
  
                  width: 1024px;
                  height: 1024px;
                              overflow: hidden
  
              }
  
              #mainBody {
  
                  width: 920px;
              }
  
  
          &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="bodyFull"&gt;
  
              &lt;div id="header"&gt;
                  The Header
              &lt;/div&gt;
  
              &lt;div id="mainBody"&gt;
  
                  &lt;div id="leftNav"&gt;
                      Left Nav
                  &lt;/div&gt;
  
                  &lt;div id="bodyContent"&gt;
                      The Body
                  &lt;/div&gt;
  
                  The End of Main Body
  
              &lt;/div&gt;
              &lt;div style="clear: both"&gt;&lt;/div&gt;
              &lt;div id="footer"&gt;
                  The Footer
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Small typo:  bodyContent to rest at the same row as the leftNav.</p>
  
  <p>/* !!! CAN THIS SECTION REMAIN ON THE SAME ROW AS THE LEFT Nav, EVEN THOUGH IT EXTENDS PAST THE 'HEADER/BODYFULL' width
                       */</p>