Geek Answers Handbook

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

.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 all children to fit without packaging, I would like there to be a scroll bar, and not the default mechanism for transferring children.

I do not control the number of children, so I can not set the width in the container. How can I prevent the wrapping of children?

+5
source share
3 answers

If you do not want wrapping, you should not use float - they were created specifically for packaging.

Use a parent container with overflow:autoand white-space:nowrapand children with display:inlineor inline-block.

+17

HTML CSS. , JavaScript, .

0

You can add the parent holder () of all child elements. And then use the: auto overflow of this div. If this does not work, also use self.innerHeight and self.innerWidth (via javascript) for the height and width of the div.

0
source

More articles:


All Articles