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: 352
        
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