CODEWITHSUNDEEP
htmlcss
Kevin Smith
Kevin Smith

Reputation: 737

How to create a scrollable div with padding on top and bottom without extra markup on the inside?

I have created a fiddle to illustrate my question. Basically I'd like to have a container with scrollable content that has a padding on the top and the bottom. [Edit:] This padding should be visible while scrolling, so that at any given time you have the same distance from the edge to the content.

<div class="container">
    <!-- pure content, no extra wrapper -->
    <h1>This is how I'd like it</h1>
    <p> ... </p>
</div>

I can only achieve the effect by adding an extra wrapper to the inside of the container. Does anyone know of another workaround that doesn't introduce another element?

<div class="container">
    <!-- extra wrapper, me unhappy -->
    <div class="inner">
        <h1>This is how I can do it</h1>
        <p> ... </p>
    </div>
</div>

Upvotes: 3

Views: 6718

Answers (2)

Dinesh Gajbhiye
Dinesh Gajbhiye

Reputation: 684

The simplest solution I could think of is adding a thick border around the box of same background color as that of the box, and reducing width/height accordingly. [Thickness of border = required padding on any side] & [border color = background color of the box ]

Upvotes: 4

gsundars
gsundars

Reputation: 56

Try using the following CSS. 

.container {
    padding-top:10px;
    padding-bottom:10px;
    height: 80px; /* Set your desired value here */
    width: 200px; /* Set your desired value here */
    overflow-x: scroll; /* for horizontal scroll-bar */    
    overflow-y: scroll; /* for vertical scroll-bar */
    white-space: nowrap; /* needed only if you want to disable text-wrapping. */
}

Upvotes: 0

Related Questions