title: Make div act as a frame
body: <p>I've got the following HTML group.</p>
  
  <pre><code>&lt;div id="item-groups"&gt;
  &lt;!-- Section to select product types --&gt;
  
  &lt;div class="item-group-button"&gt;
  &lt;!-- Item Group Selection Button --&gt;
  &lt;h3&gt;Beverage&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="item-group-button"&gt;
  &lt;!-- Item Group Selection Button --&gt;
  &lt;h3&gt;Tobacco&lt;/h3&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've designed the following CSS for the above elements..</p>
  
  <pre><code>#item-groups{
  height: 75px;
  
  }
  
  .item-group-button{
      width:130px;
      height:40px;
      float:left;
      margin:17px 0px 0px 20px;
      border-radius:10px;
      background:#4e5154;
  }
  
  .item-group-button h3{
      padding:0px;
      margin:8px 0px 0px 29px;
      color:white;
  }
  </code></pre>
  
  <p>How Can I design the CSS so that the item-groups div can act as a frame. To explain a little bit, The item-group-butons are loaded from a DB and the amount of elements are dependent on the number of DB records. when the elements exceed a certain limit, the excess elements go out of order. How can I stop this? I went through a method where making other elements position absolute then the needed element can act as a frame. but in my case that is not possible. </p>
  
  <p>I tried removing the width limit of the item-groups element but no use!</p>
  
  <p>Update:</p>
  
  <p><img src="https://i.stack.imgur.com/BwZr3.png" alt="With less buttons"></p>
  
  <p><img src="https://i.stack.imgur.com/rN5De.png" alt="with more buttons"></p>
  
  <p>As you can see the first images displayes correctly but the second images shows that with more buttons, other elements go out of the order. How can I fix this. I want the buttons to stick to one line rather than going to the second line.</p>
  
  <p>When using html frames, when there is more elements to show, there will be a scroll bar! How can I use that functionality in a Div.</p>