1

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?

sawa
  • 165,429
  • 45
  • 277
  • 381

1 Answers1

2
<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/

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • This is mostly right but the child either needs an overflow:hidden or the width and height need to be removed because right now the text just runs on top of the other divs when it exceeds the length. – fdsa Jan 06 '13 at 22:18
  • @fdsa It all depends what is in the child divs. That information was not included in the question. If it is text that needs to wrap then a simple `white-space: normal` should suffice. – James Montagne Jan 06 '13 at 22:26
  • That's a good point. I assumed that he wanted it one way but he really didn't specify – fdsa Jan 06 '13 at 22:28
  • I have fixed width div elements as children, and do not want their shape to change in any way. Do I have to set `overflow:hidden` for the children as well? – sawa Jan 06 '13 at 22:30