I need to create 5 divs aligned horizontally next to each other, spanning the width and height of the window. Each div should occupy 20% of the window width, and any overflow content should be hidden. Below is the CSS code 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 are displaying next to each other as intended, but the overflow content is not being hidden. The height adjusts to fit the content... Any suggestions for fixing this issue?
Thank you in advance!