CODEWITHSUNDEEP
htmlcss
Paul Zaczkowski
Paul Zaczkowski

Reputation: 2888

CSS overflow hiding elements that won't fit 100%

I have a div element, that I essentially want to turn into a window (of sorts). Basically, within that div element is content that extends beyond the view port of the "window" (div element). Here's a picture of what I'm trying to accomplish:

image of what i want to accomplish

Now, I tried creating a div element of a fixed size, and gave it overflow: hidden, then placed the larger bit of content within that. The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits 100% within the overflow area, it disappears.

To know what I mean, I've attached another picture:

problem that's occuring

Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).

Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?

Edit The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish: http://jsfiddle.net/MRnL6/1/

Thanks!

Upvotes: 3

Views: 4131

Answers (4)

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

I think you are trying to accomplish something like this.

Please see: http://jsfiddle.net/UMJwT/2/

try adding a intermediatary 

div

Upvotes: 0

Travis J
Travis J

Reputation: 82297

The easiest option is to restyle the inner portions so that they all fit instead of overflowing.

See this demo

#container{
 width:400px;
 height:100px;
 border:5px solid gray;
 margin:10px;
}
.test{
 display:inline-block;
 width:25%;
 height:100%;
}

Upvotes: -1

Chad
Chad

Reputation: 5418

I think I understand what you're getting at. I think your elements are dropping down to the next line because their parent container isn't holding them. Try creating a container inside your window to contain the elements with a width equal to all of its children. See this fiddle for example.

The HTML:

<div id="window">
    <div id="container">
        <div class="elem one"></div>
        <div class="elem two"></div>
        <div class="elem three"></div>
        <div class="elem four"></div>
    </div>
</div>

and the CSS:

#window {
    height: 100px;
    overflow: hidden;
    width: 250px;
}
#container {
    width: 400px;
}
.elem {
    height: 100px;
    float: left;
    width: 100px;
}
.one {
    background: #0f0;
}
.two {
    background: #f0f;
}
.three {
    background: #ff0;
}
.four {
    background: #0ff;
}

Upvotes: 4

bmasterson
bmasterson

Reputation: 269

If I understand you want to be able to scroll to the content? Try overflow:scroll.

Upvotes: 0

Related Questions