Can't stretch div when width is filled

Question

I want to add auto stretch the content div and add horizontal scroll to the page when the width of the content is overfilled.

You can see the HTML/CSS here: http://jsfiddle.net/Rknbs/

HTML

   <div id="layout">
        <div id="header">
        <h1><span id="_t13">My App</span></h1>
      <div class="username-logout">   
        <h4 class="username">Welcome <span>Admin Mahmoud </span></h4>
        <a id="logout" href="/logout">Logout</a>
      </div> 
   </div>

   <div id="content">
       <div class="div1">
          <h2>This is the contenttttttttttttttttttttttttttttttttttttttttttttttttttt</h2>
       </div>    

       <div class="tableClass">
            <table>
                 <tbody>
                      <tr>
                      <td><label>Name:</label></td>
                      </tr>
                     <td><input type="text" style="width:-moz-available"></td>
                </tbody>
            </table>
        </div>
        </div>

        <div id="footer">
           <h2>Powered By: My COMP </h2>
        </div>

        </div>

CSS

    body #layout {
    height:100%;
    width: 70%;
    position: fixed;    
    padding-left: 15%;
    padding-right: 15%;    
    margin-top: -8px;
    overflow: scroll;

}


body #layout #header{
     height:20%;  
}


body #layout #header h1 {
    margin-bottom: 3%;
    max-width: -moz-max-content;
}

body #layout #header .username-logout {
    background-color: #516170;
    height: 19%;
    color: white;  
}

body #layout #header .username-logout .username{
    margin-bottom: 0;
    float:left;
    margin-top: 0.5%;
    margin-left: 0.5%;
    font-weight:lighter;
}

body #layout #header .username-logout .username span{
    font-weight: bold !important;
}

body #layout #header .username-logout #logout {
    float: right;  
    margin-right: 0.5%;
    margin-top: 0.5%;
    color: #FFFFFF;
}


body #layout #content{
    min-height:60%;    
    border:1px solid black;
   /* background-color: #F8F8FF; */
}

body #layout #content .contentTitle{
    margin-left: 1%;
}

body #layout #content .contentTitle .welcomeHome{
    color: #516170;
}

body #layout #content #add-new-link{
    margin-left: 1%;
}

body #layout #content .submit-cancel{
    margin-left: 10%;
}

body #layout #content .submit-cancel input{
    margin-right: 1%;
}


body #layout #footer{
    height:10%;
    text-align: center;
    padding-top: 25px;
    font-size: 60%;
}

.div1{
    background-color: lavender;
    border-color: lavender;
    border-style: inset;
    border-width: thin;
    float: left;
    width: auto;
}

.tableClass{
    margin-left: 10%;
    width: 80%;
}

body #layout #content table tbody tr td{
    padding-bottom: 0.5%;    
    padding-top: 0.5%;
}

Answer 1

You could really clean that CSS. There's no need to declare everything with a complete object paths.

Your #content div width is controlled by the parent #layout div. If the #layout div has a fixed width, that's as wide as the #content div can grow. It won't "auto-grow" any larger than it's parent container. Remove the width property from the #layout CSS if you want the div to stretch horizontally.

In any event... if you want the #content div to scroll horizontally....

#content {
min-height:60%;    
border:1px solid black;
width:100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}

You may not want the nowrap attribute there, but I threw it in for good measure.

updated jsfiddle..... All I did was remove width: 70%; from body #layout

jsFiddle Here