CODEWITHSUNDEEP
htmlcss
Channel72
Channel72

Reputation: 24719

Hidden inner-DIV

Suppose I have two DIV elements: a outer container DIV, and inner DIV inside the container. I want the inner DIV to be much larger than the outer DIV, but the outer DIV has an overflow:hidden property so most of the inner DIV isn't visible.

The purpose would be to implement scrolling or swiping functionality where you could move the inner DIV around within the outer DIV.

A basic implementation could be something like:

<!DOCTYPE html>
<html>

<head>
<style>

.container {
    width: 500px;
    height: 40px;
    border: 1px solid #a8a8a8;
    padding: 5px;
    overflow: hidden;
}

.inner-content {
    white-space: no-wrap;
    position: relative; 
    display: inline-block;
}

.inner-element {
    display: inline-block;
}

</style>

</head>

<body>
<div class = "container">
    <div class = "inner-content">
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
    </div>
</div>

</body>

</html>

The problem is that I want all of the elements in the inner DIV to appear side-by-side, on the same horizontal line, so the user can scroll left or right.

So this can be achieved by simply using display: inline-block on all the elements (or float). Except the problem is in order to prevent the inner elements from wrapping, I need to specify a very large width on .inner-content. (For example, if I specify width:10000px or something, then the inner elements of course don't wrap.) But the problem then is that the user would be able to endlessly scroll the inner DIV to the right.

So, how can I arrange things so that all of the (partially-hidden) elements within the inner DIV remain on the same horizontal line (without explicitly specifying a width)?

Upvotes: 2

Views: 434

Answers (1)

Eli Gassert
Eli Gassert

Reputation: 9763

You were really close with your sample code! By setting the inner elements to inline-block and specifying nowrap you make sure each element won't wrap inside the container. But then you also want the chain of elements to not wrap at the end of each inner element. So simply adding nowrap to the container, all items will be on the same line.

http://jsfiddle.net/ere4x/

Upvotes: 1

Related Questions