Problems with overflow:hidden

Question

I want to have 5 divs horizontally next to each other spanning the width and height of the window (each div occupies 20% of the window width). Any content that doesn't fit the div should be hidden. This is how the css looks for two of the divs:

#container1 {
    float:left; 
    width:20%; 
    height:100%;
}
#container1 .scrollBox {
    height:100%; 
    overflow:hidden;
}
#container1 .scrollBox .container {
    position:relative; 
    width:94%; 
    float:left;
}
#container1 .scrollBox .content {
    clear:both;
}
#container1 .scrollBox .content p {
    padding:0 5px; 
    margin:10px 0; 
    color:#fff; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:13px; 
    line-height:20px;
}

#container2 {
    float:left; 
    width:20%; 
    height:90%;
}
#container2 .scrollBox {
    height:100%; 
    overflow:hidden;
}
#container2 .scrollBox .container {
    position:relative; 
    width:94%; 
    float:left;
}
#container2 .scrollBox .content {
    clear:both;
}
#container2 .scrollBox .content p {
    padding:0 5px; 
    margin:10px 0; 
    color:#fff; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:13px; 
    line-height:20px;
}

The containers appear next to each other as I want, but the overflow content is not hidden. The height fits the content... Any help?

Thank you very much

Do you have html,body { margin:0; height:100%; } in your css? — MatTheCat
– MatTheCat, Commented Aug 26, 2011 at 10:29
Didn't have for the html. That did the trick. Thank you very much! — pnsilva
– pnsilva, Commented Aug 26, 2011 at 10:48

MatTheCat · Accepted Answer · 2011-08-26 11:15:42Z

1

User agents need a reference value to solve percentages. When nothing is specified sometimes the viewport height is used but in most of the case you have to explicit it.

html,body {
    margin:0;
    padding:0;
    height:100%;
}

margin and padding rules override some default styles of user agents.

http://www.w3.org/TR/CSS2/visudet.html#propdef-height

answered Aug 26, 2011 at 11:15

MatTheCat

18.8k6 gold badges59 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nobody · Accepted Answer · 2011-08-26 10:36:50Z

0

Put overflow:hidden inside #container1 {} instead of #container1 .scrollBox {}.

answered Aug 26, 2011 at 10:36

nobody

10.7k4 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

Problems with overflow:hidden

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related