Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Scrollable Div's
Your Ad Here

Scrollable Div's


Scrollable Div'sOn some sites when you see a scrollbar inside a table cell maybe you think they have an inline frame inside the cell, well this can be achieved by using a div using the CSS overflow attribute. The only downside to using this is that you can't change the content inside the cell without changing your code unlike inline frames where you can change the page. Nevertheless this is still a good code to use on certain parts of your site.

To see an example of this code click here.

Description of the code

To make this code possible you need to add the overflow attribute to the tables td tags.

<td style="width: 400px; height: 300px;">
<div style="width: 100%; height: 100%; overflow: auto;">

You see by adding the div style width and height to 100% the div fills the entire section of the table cell and by making the overflow attribute have the value auto it make scrollbars appear if they are needed. After you have entered all of your content into the cell you must remember to close the div tag. </div>.

<table cellpadding="0" cellspacing="0" border="1">
<tr>
     <td style="width:400px; height:100px;"> </td>
</tr>
<tr>
     <td style="width:400px; height:300px;">
         <div style="width:100%; height:100%; overflow:auto;">

This is the start of the table code and you can see there are no other tags or attributes and the scrollbar only appears because of the div, there is no CSS in the head of the page because the styles are applied into the page code. After you have this code just insert all your content (bear in mind you can change the width and height of the cell) and remember to close all of the open tags, simple isn't it?



Author's URL: Joseph Skidmore
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Scrollable Div's"

Only registered users can write comment

No comments yet...