Make div act as a frame - html

Question

I've got the following HTML group.
<div id="item-groups">
<!-- Section to select product types -->
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Tobacco</h3>
</div>
</div>
I've designed the following CSS for the above elements..
#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;
}
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.
I tried removing the width limit of the item-groups element but no use!
Update:
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.
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.

Answer 1

It's a simple CSS trick that can be done bu using the following codes.
for the parent element :
#item-groups{
height: 80px;
width: inherit;
overflow-x: scroll; <-- Make the scrolling horizontal
white-space: nowrap; <-- Handle the white space in the element
}
for the child element :
.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
display: inline-block; <-- this will display the excess elements in a line
}
removing the float from the child element is necessary.
Thank you guys for your effort!

Answer 2

To get the scroll bar, you would use overflow-x: scroll; on the container, which allows the elements within to expand beyond its bounds, and creates a scroll bar when that happens.
I would like to point out that for a menu this might not be the best option. The scroll bar just won't mesh with the design well. I see two alternatives:
Re size buttons if the container can not fit them. Basically, you would define the max-width: property, and give them a percentage width:, thus all the buttons will look normal until there is overflow. Obviously this could be a problem with labeling. You may need to do overflow-x: hidden; on the label text to make it look right. Or try. . .
Create your own scrolling. If you are comfortable with a little JavaScript, you can use overflow-x: hidden; and position: relative; on the container, then have a "slider" inside of it that holds the buttons, and has position: absolute;. Then, on either end of the container would be hover-buttons, that would trigger JS to adjust the position of the slider, thus scrolling. This will only work if JS is enabled, though you can simply fall back to the overflow-x: scroll; method in such a case. The advantage here is that everything looks nice and uniform.
I generally try to stray away from forcing scroll bars, as each OS/browser can render them very differently. Now you can style scroll bars, as CSS3 provides a number of pseudo-elements to deal with them. Unfortunately browser support is sketchy, and requires special browser specific codes, which means it really isn't a very good option.