I want to have a horizontal scrollbar if necessary, by having the 'child' divs be added side-by-size instead of getting pushed to the next row when the parent isn't wide enough.
My code is below. If you set .mid to have width: 1000px you'll see what I'm going for, only I only want it to be as wide as the dynamically generated children.
<html>
<head>
<style type="text/css">
.parent {
width: 400px;
background-color: #666;
overflow:scroll; /* cater to the older browsers */
overflow-y:hidden; /* Hide vertical*/
}
.mid {
background-color: red;
}
.child {
display:inline-block;
background-color: #ccc;
border: 1px solid black;
width: 190px;
}
</style>
</head>
<body>
<div class="parent">
<div class="mid">
<div class="child">
I am a child.
</div>
<div class="child">
I am a child.
</div>
<div class="child">
I am a child.
</div>
</div>
</div>
</body>
</html>