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

Answer 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