0

Consider the following ...

http://roosteronacid.com/viewport.png

Here's three elements, with only one element shown (left-most). Is this possible? I've tried something along the lines of this ...

<div id="container">
    <div></div>
    <div>I overflow the container, so I should be hidden</div>
    <div>I also overflow the container, so I should be hidden</div>
</div>

#container {
    overflow: hidden;
    width: 300px;
}

#container div {
    float: left;
    width: 300px;
}

... But I can't get it to work without specifying a fixed height. Which is something I don't want to. The height of an element has to be dynamic and grow according its content.

Note: this has to be a iOS Safari compatible.

cllpse
  • 21,396
  • 37
  • 131
  • 170
  • It won't auto grow height with `height: auto` (default I believe)? – alex Jun 21 '11 at 00:10
  • I'm confused - the inner divs are expanding the outer container, but you don't want them to? It should be noted that the overflow: hidden is how you expand the containing div to contain inner, floated divs. – kinakuta Jun 21 '11 at 00:12
  • http://roosteronacid.com/viewport.png 404s please re-upload somewhere more stable – Benjamin Peter May 13 '17 at 11:14

1 Answers1

2

See: http://jsfiddle.net/9Nh7t/

  • Replace float: left, with display: inline-block.
  • To prevent wrapping, add white-space: nowrap on the parent element.

To get rid of "the gaps" (visible here, for example), the easiest fix is to remove the whitespace from your HTML: http://jsfiddle.net/9Nh7t/2/

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Wow! That was fast! I'd like to format my source with indents and spaces. Is there any way to remove the white-space in-between the elements (rendered) without having to truncate my source? – cllpse Jun 21 '11 at 00:32
  • 1
    Sure: http://stackoverflow.com/questions/6350218/bikeshedding-css3-property-alternative/6351697#6351697 – thirtydot Jun 21 '11 at 00:35