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?

Solution

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.

Comments

[Justin808]

inline-block was what I needed to use. Thanks

[Tgr]

@Justin808: the downside is that if you want it to work on older browsers (FF2, IE6-7), you will need a bunch of workarounds