title: Add horizontal scrollbar to div with gridview?
body: <p>My webform has 3 <code>&lt;div&gt;</code>: The left <code>div</code> is <code>width: 300px</code> and the second div is <code>width: 160px</code>. The third <code>div</code> does not have a set width because it contains a gridview that can change in size. In other words, the gridview can have any amount of columns and each column must be 200px wide. </p>
  
  <p>In this example, <code>GridViewClicks</code> has 10 columns at 200px width each. My screen is 1366x768, and 460px (300px+160px) is already taken up by two divs. The remaining space cannot display the 2000px gridview (10 cols x 200px). So it moves the third div to the bottom. And even when moving the div to the bottom, it automativally shrinks the columns. If I change <code>columnNumber</code> to <em>4</em> then the <code>GridViewClicks</code> fits.</p>
  
  <p>I need to display <code>GridViewClicks</code> next to the first two divs, and show a <strong>horizontal scrollbar</strong> once the gridview width is greater than the available space. Each gridview column needs to be 200px each, no column resizing can be done.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
  &lt;div&gt;
      &lt;div style="width: 300px; height: 300px; background-color: green; display:inline-block;""&gt;
          &lt;asp:Button ID="Button1" runat="server" Width="278px" Text="Button" /&gt;
      &lt;/div&gt;
      &lt;div style="width: 160px; height: 160px; background-color: blue; display:inline-block;"&gt;
          &lt;asp:Button ID="Button2" runat="server" Width="140px" Text="Button" /&gt;
      &lt;/div&gt;
      &lt;div style="background-color: red; display: inline-block;vertical-align: top; overflow-x: auto;"&gt;
              &lt;asp:GridView ID="GridViewClicks" runat="server" onrowdatabound="GridViewClicks_RowDataBound"&gt;
              &lt;/asp:GridView&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And codebehind:</p>
  
  <pre><code>public partial class ToErase : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
          DataTable table = new DataTable();
          int columnNumber = 10;
          for (int i = 0; i &lt; columnNumber; i++)
          {
              table.Columns.Add(i.ToString(), typeof(string));
          }
  
          DataRow row = table.NewRow();
  
          for (int i = 0; i &lt; columnNumber; i++)
          {
              row[i.ToString()] = "item " + i.ToString();
          }
          table.Rows.Add(row);
  
          GridViewClicks.DataSource = table;
          GridViewClicks.DataBind();
  
      }
      protected void GridViewClicks_RowDataBound(object sender, GridViewRowEventArgs e)
      {
          if (e.Row.RowType == DataControlRowType.DataRow)
          {
              DataRowView drv = e.Row.DataItem as DataRowView;
  
              for (int i = 0; i &lt; drv.Row.ItemArray.Length; i++)
              {
                      e.Row.Cells[i].Width = 200;
                      e.Row.Cells[i].Height = 80;
              }
          }
      }
  }
  </code></pre>