Creating scrollable content area using CSS overflow property in Expression Web

Posted by: Minal Agarwal , on 3/20/2010, in Category Expression Web
Views: 70647
Abstract: In this article, we will create scrollable content area by using the CSS overflow property for HTML divs in Expression Web
Creating scrollable content area using CSS overflow property in Expression Web
A scrollable content area is as simple as it sounds. It is a section that can contain any type of content like text, image or whatever you want, that can be scrolled through. Such scrollable areas are a convenient way to present your data and organize it. They can be very useful when you feel you must have everything on your home page. Well that won’t be feasible though. But some clients have such demands. In that case, you can add scrollable content areas according to the type of content on the home page. If the user wants he can scroll and read the contents in that area. These scrollable content areas are actually scrollable divs. In this article, we will see how to create a scrollable div.
HTML div tag supports the CSS property – ‘overflow’. The overflow property lets you add scrollbars to the div when its content exceeds the defined height and width. Well the property doesn’t only add scrollbars but other values also determine its behavior. Before we get into how to add scrollbars to divs, let us just briefly touch upon all the values of the overflow property and learn when to use each one of them.
Every element has its own box and the content in this box decides the way it is displayed on the page. Usually the size of the box grows to accommodate its contents. CSS overflow property defines how the contents of an element should be treated if they exceed the width and height of the element. The property takes four types of values;
1.    auto – automatically displays vertical and horizontal scrollbar.
2.    hidden – clips the contents that are overflown.
3.    scroll – adds both vertical and horizontal scrollbars. These scrollbars will be activated only when the contents exceed the assigned boundaries.
4.    visible – is the default value for the overflow property. It allows the contents to exceed the limits of the element, so that it is visible even outside the box.
5.    inherit – the element should have same value as its parent.
In this article, we will create scrollable div using the ‘scroll’ value of the overflow property.
See the example given below:
scroll_div_example
Now let us see how to do this, it isn’t rocket science. The scrollable areas you see above are actually divs, rather scrollable divs. Let us now take a look at the steps:
1.    In the Design view, place the cursor where you want to place the div.
 
2.    From the Toolbox, do either of the following:
 
a.    Double click on <div>
 
b.    Click on <div> drag and drop on the page.
 
3.    If you already have content on the page which needs to be wrapped around the <div> tag, select the content and key in CTRL + Q to open the Quick Tag Editor. In the dialog box, type <div> and hit Enter.
 
4.    In the quick tag selector, select the entire div and then use the square handles to resize the div. See image below:
div_resize
NOTE: If you have an image in your div, make sure you select the div tag and not the <img> tag, else you’ll end up changing the dimensions of your image instead of the <div>.
 
5.    Resize the div as per your requirement. If the size of the div is lesser than its contents, then the contents will be visible extending out of the div. See image below:
after_resizing
6.    Now we need to cover the text that is overflowing outside the div and make it visible only after scrolling down the div. For that we need to set the ‘overflow property’ of the div to ‘scroll’. To do that;
 
a.    To add the property to an existing style applied to the div, select the div (use the quick tag selector) and then set the overflow property value to scroll in the CSS Properties Panel.
 
b.    In the Manage Styles Panel, right click on the style that has already been applied to the div, choose Manage Styles. In the Manage Styles dialog box, in the Layout section set the overflow to scroll. See below:
modify_style_dlg
c.    If the div has not already been styled, select the div. In the Apply Styles or Manage Styles Panel, choose New Style... In the New Style dialog box, go to the Layout section and choose overflow: scroll. Also choose the option (top right corner of the dialog box, see image above) ‘Apply new style to document selection’. Set other CSS properties in the same dialog box.
 
 
7.    See how the div is visible in the Design view:
final_desing_view
Similarly you can add images or both text and iamges to scrolling divs.
Conclusion

A scrollable div can be used in a better way to manage the content on a web site.

If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Marius The IT Guy on Tuesday, July 23, 2013 11:29 AM
It's very simpel actualy, in css just like

#container {
    overflow:scroll;
}

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel