CODEWITHSUNDEEP
csshtmloverflow
Doom23
Doom23

Reputation: 3

DIV with overflow:hidden lets children disappear

I have a DIV with a set height and overflow: hidden . Inside the DIV, there's some content (a P, maybe some IMGs... it's a wordpress post content, by the way). The content is completely unstyled (no css applied to any of it!)

Now when I remove the height and the overflow: hidden from the DIV css, the whole content will be shown. So far, so good. But when I set the height and the overflow-property, the content will completely disappear!! Instead of being just "cut off" at the certain height. The DIV displays properly, but the content then seems to be completely invisible. :(

Could you please help me if there are any errors / known problems with this method?

My HTML:

<div class="post-text-long">
    <?php the_content(); ?>  // This displays the post's contents, just to let you know
</div>

The CSS that lets the contents disappear:

.post-text-long {
    height: 200px;
    overflow: hidden;
}

EDIT: Live example removed, thanks everyone for your help!

Upvotes: 0

Views: 7955

Answers (3)

Raheel Ayub
Raheel Ayub

Reputation: 193

Use this instead:

.post-text-long {
    height: 210px;
    overflow: hidden;
    width: 100%;
}

You need to add width to get this code working.

Upvotes: 3

kapa
kapa

Reputation: 78671

.post-text-long { clear: left; }

Upvotes: 1

easwee
easwee

Reputation: 15895

The html/css code is ok - http://jsfiddle.net/easwee/gXg5w/4/

You are saying that it's a wordpress content - check if there are unclosed divs or any other elements that might break your design once the content is loaded.

Open your page in firefox - if you have firebug try to delete out all html content and add in some Lorem ipsum text to see the results.

Otherwise provide a live example with problematic content.

Upvotes: 0

Related Questions