Is it possible to prevent wrapping of child elements in HTML?
15,009
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
.
Related videos on Youtube
Comments
-
Justin808 almost 2 years
.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?
-
Justin808 over 13 yearsinline-block was what I needed to use. Thanks
-
Tgr over 13 years@Justin808: the downside is that if you want it to work on older browsers (FF2, IE6-7), you will need a bunch of workarounds