Vivek Soni

Vivek Soni: Strong theoretical - yet practical - and technical background with a Master of Computer Science (with Business Option). Read More

Scroll area with overflow in CSS in FF

April 3, 2012 | Author: vivek kumar | Filed under: Miscellaneous

Small Scrollable Areas Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on the internet. Scrollbars can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any page [...]

Small Scrollable Areas

Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on the internet. Scrollbars can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any page element.

A normal block element, like a <div> can be set to a certain height and width. What happens when the content of the DIV exceeds the size given to it?

Enter the CSS property ‘overflow’.

  • overflow: auto – This will create a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful approach to creating a scrollbar.
  • overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
  • overflow: visible – This will cause the content of the block to expand outside of it and be visible at the same time.
  • overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not visible. There will be no scrollbars.

CSS:

<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>

HTML:

<div>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

 

Mar 2012 1

Prepare for Google settings before the new policy begins.

Wednesday is the last day for people to tweak those Google settings before the new policy begins, although they can change them afterward as well. Here are a...

Jun 2011 5

Fix for Fatal error: Call to undefined function base_url() in CodeIgniter

Here is the fix for Fatal error: Call to undefined function base_url() in CodeIgniter Replace in config/autoload.php $autoload['helper'] = array(”); with $autoload['helper'] = array(‘url’);

Jun 2011 1

SAML 2.0 (protocol for standardizing single sign on (SSO) between sites)

I have been working a lot with SAML recently, which is a protocol for standardizing single sign on (SSO) between sites. A good number of sites and products...

Jun 2011 1

Enterprise Service Bus in a nutshell

An ESB can be described as a set of components that provide the busisness tier with core integration services. The key advantage of an ESB is that it...

May 2011 31

Jquery PHP calculator free script download

Jquery PHP calculator free script download The server will support a number of different operators and are structured in such a way that it is easily extensible to...

Feb 2011 4

How to avoid require_once to support direct db queries in Zend framework.

My co-workers had to include a “requre_once” statement in their models to get the DBTable class they were interested in using. This was needed if to use DB...

Feb 2011 1

MySQL Function: Group_Concat

The Scenario You’re writing code to perform authentication for a web-based app. Your users live in one table (Site_User), your list of site permissions live in another table...

Dec 2010 15

Eliminate sudo password prompts

My friend Bob was asking me about this earlier so I thought I’d share this tip with the rest of the you… If you’re as annoyed as I...

Dec 2010 6

How to Remote Root Access to MySql.

I typically like to do on my server boxes is allow root access to my Mysql database from remote computers. I don’t forward the port through my router...

Recent Comments

  • Ahmed: thanks dude, that solved it
  • priya agarwal: hello sir
  • RAVI SINGH: hello Sir, I am ravi from Barabanki. How r u. Please give reply , Take Care.
  • MuleKing: Hi Can you please list step-by-step procedure how to package and deploy mule projects..as I followed your...
  • reda gurd: You are a genius. i was looking for this solution all day. thanks man Cheers reda

Older Posts