How to make overflow: hidden really hide content?

Posted by tambourine on Stack Overflow See other posts from Stack Overflow or by tambourine
Published on 2010-06-09T20:43:46Z Indexed on 2010/06/10 9:23 UTC
Read the original article Hit count: 288

Filed under:
|
|

Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much.

Is there any way to avoid it without javascript?

Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.

© Stack Overflow or respective owner

Related posts about html

Related posts about css