DIV Scrollable Content
div{
overflow : scroll;
}
dr3am_warri0r
div{
overflow : scroll;
}
// OverflowX and OverflowY properties in Javascript
// x-axis scroll bar
document.getElementById("myId").style.overflowX = "scroll";
// y-axis scroll bar
document.getElementById("myId").style.overflowY = "scroll";
// both x-axis and y-axis scroll bar
document.getElementById("myId").style.overflow = "scroll";
// To remove overflow, do the following:
document.getElementById("myId").style.overflow = "hidden";
/* To solve overflow issue in IE,
always use properties separately,
do not use short hand */
div {
overflow-x: hidden;
overflow-y: auto;
}
#wrapper {
width: 500px;
border: 1px solid black;
overflow: hidden; /* add this to contain floated children */
}
#first {
width: 300px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
float: left; /* add this */
}
CSS allows us to control the vertical or horizontal scrollbar with two properties.
overflow-x /*controls the horizontal scrollbar*/
overflow-y /*controls the vertical scrollbar*/
overflow-x /*and overflow-y have the same values as the overflow property*/
auto
scroll
visible
hidden
#wrapper {
width: 500px;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 300px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
overflow: hidden; /* if you don't want #second to wrap below #first */
}