Question

I have a container div element and some children div elements.

<div>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
<div>

I want to horizontally list the children elements in a single line without line breaks. I read that I can use white-space:nowrap on the container element and/or display:inline or display:inline-block on the children. This works when the container’s width is long enough.

However, I have a container whose width may become shorter than the sum of the widths of the children. The way mentioned above does not prohibit line breaks in such case. I still want to prohibit line breaks and force them to be on a single line, with the extra part of children being hidden if the container width is not enough. How can I do that?

Answer 1

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

#parent{
   overflow: hidden;
   white-space: nowrap;
}

.child{
   display: inline-block;
   width: 200px;
   height: 200px;
}

http://jsfiddle.net/YAp6k/