Creating scrollable content using CSS | Heart Internet Blog – Focusing on all aspects of the web

If you want to fit a large amount of copy into a small amount of space (e.g. showing snippets from your blog posts or testimonials on your home page ) or you don’t want your site visitors to be scrolling down and down and down… (e.g. you have lengthy terms and conditions) you can display all this content within a scrollable box using the ‘overflow’ property.

The example below uses an internal CSS style sheet but the same rules apply if you are using an external style sheet.

The first step is to create the Div with the overflow property along with the styling values we want the Div to follow. The HTML below will create an area 300px wide and 300px high, with a solid gray border and a white back ground.

 

 

 

Once you have added this to your site you can now place the Div anywhere you want with whatever formatting you like within the Div…

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique nulla eget mi facilisis rutrum. In sem arcu, tempor ac, fringilla et, rhoncus sed, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae enim.

 

You will now have a text area your site’s visitors can scroll up and down to read…

This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.

This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.

This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.

 

Simple!

 

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Got a question? Explore our Support Database. Start a live chat*.
Or log in to raise a ticket for support.
*Please note: you will need to accept cookies to see and use our live chat service