CODEWITHSUNDEEP
htmlcss
cllpse
cllpse

Reputation: 21727

Hide elements, that overflows a fixed width element

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.

Upvotes: 0

Views: 4008

Answers (1)

thirtydot
thirtydot

Reputation: 228162

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/

Upvotes: 2

Related Questions