Is it possible to prevent wrapping of child elements in HTML?

Question

.container
{
 position: absolute;
 bottom: 0px;
 height: 25px;
 left: 200px;
 padding-right: 5px;
 background-color: black;
 overflow: hidden;
}


.child
{
 position: relative;
 float: left;
 height: 100%;
 width: 95px;
 background-color: #99CCFF;
 margin-left: 5px;
}

I when the size of the browser window is smaller than will allow for all the children to fit without wrapping I would like there to be a scrollbar, not the default mechanism of the child elements wrapping.

I'm not in control of the number of child elements so I can not set a width on the container. How can I prevent the wrapping of the child elements?

Answer 1

This is not really possible with simple HTML and CSS. Without knowing the number of child elements, the only way would be to dynamically set a min-width using JavaScript, based on the number of child elements and their total width.

Answer 2

You can add a parent holder () of all childes. And then use the overflow:auto of that div. If that doesn't work then also use self.innerHeight and self.innerWidth (via javascript) for the div height and width.

Answer 3

If you don't want wrapping, you should not use floats - they were created specifically for wrapping. Use a parent container with overflow:auto and white-space:nowrap and children with display:inline or inline-block.