A few years ago, many web designers didn’t know this method. I think there are some designers which still doesn’t know this method. Therefore, i decided to write this short article.
Div elements have width and height properties and we set values of these properties as we want. However, our content can be bigger than the area that we divided sometimes. We have three choice:
1- Extending the area that we divided for div.
2- Adding a scrollbar to the div for overflowing content.
3- Hiding overflowing content.
We will talk about second choice…
Structure 1.0: If we want to add scrollbar to both of x and y
direction, we should use this structure.
1
2
3
4
5
| #[Div Id] {
width:[width value];
height:[height value];
overflow:auto/scroll/hidden;
} |
Overflow property can be appointed as scroll but if we use “scroll” value, scrollbar is added to div although content didn’t overflow. At the same time, overflow property can also be appointed as auto. In this case, scrollbar is just added to div when the content overflowed.
Example 1.0:
1
2
3
4
5
6
7
8
9
| <style>
#myDiv {
border:1px solid #cccccc;
width:250px
height:100px;
overflow:scroll;
}
</style>
<div id="myDiv">As you see, we determined <em>scroll value</em> to overflow property and scrollbars appeared although our text didn't overflow.</div> |
Output of Example 1.0:
As you see, we determined scroll value to overflow property and scrollbars appeared although our text didn’t overflow.
Example 1.1:
1
2
3
4
5
6
7
8
9
10
11
| <style>
.myDiv {
border:1px solid #cccccc;
margin:3px;
width:250px
height:100px;
overflow:auto;
}
</style>
<div class="myDiv">As you see, we determined <em>auto value</em> to overflow property and scrollbars did not appear. Because, content didn't overflow.</div>
<div class="myDiv">Auto value appointed to overflow property. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</div> |
Output of Example 1.1:
As you see, we determined auto value to overflow property and scrollbars did not appear. Because, content didn’t overflow.
Auto value appointed to overflow property. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
Structure 2.0: You can determine which axises ( x-axis or y-axis or both of them ) of scrollbar will be shown. It is too easy…
1
2
3
4
5
6
| #[DivId]{
width:[width value]
height:[height value]
overflow-x:[scroll/auto/hidden] /* for x-axis */
overflow-y:[scroll/auto/hidden] /* for x-axis */
} |
Example 2.0
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
.myDiv {
border:1px solid #cccccc;
margin:3px;
width:250px
height:100px;
overflow-x:scroll;
overflow-y:auto;
}
</style>
<div class="myDiv">We determined <em>scroll value</em> to overflow-x property, <em>auto value</em> to overflow-y property</div>
<div class="myDiv">We determined <em>scroll value</em> to overflow-x property, <em>auto value</em> to overflow-y property Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</div> |
Output of Example 2.0
We determined scroll value to overflow-x property, auto value to overflow-y property
We determined scroll value to overflow-x property, auto value to overflow-y property Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
As you see, horizontal scrollbar was showed in the both of two div but vertical scrollbar was showed only in first div.
I hope, this article will be usefull for you.
Nice fix, I may have to implement this on my new Kingdom Hearts social networking site