CODEWITHSUNDEEP
cssoverflow
GuerillaRadio
GuerillaRadio

Reputation: 1297

Using overflow:auto on a container to contain long paragraphs of text

I've got a container with 10px padding all round. It has a set height on it and overflow:auto in order to contain the 'description' which can be as much as 1000 characters long.

Here is what it looks like with no overflow...

enter image description here

And here it is with a overflow:auto on the container.

enter image description here

This adds a scrollbar which is the desired effect. However, despite there being 10px of padding on the bottom of the container, the text continues to the very bottom of the containers edge, suggesting that padding isn't taken into account when overflowing. I've tried adding more padding but as expected it makes no difference.

Here is the HTML...

<div class="journix-info-inner input-container shadow-bottom">
        <div class="info-header">
                <h2 class="journix-title">
                         <?php echo $row['title']; ?>
                </h2>
                <h3 class="journix-user">
                         by <?php echo $row['user_id']; ?>
                </h3>
         </div>
         <p class="info-content">
                <?php echo $row['description']; ?>
         </p>
</div>

And here is the CSS...

.journix-info-inner {
    margin-right:310px;
    max-height:360px;
    overflow:auto;
    padding:10px;
}

This screenshot shows the padding and how the text is overlapping the bottom 10px of padding.

enter image description here

Upvotes: 1

Views: 369

Answers (2)

OscillatingEthmoid
OscillatingEthmoid

Reputation: 163

My suggestion would be to set a <section> or <article> element around the text within the container. You can add a class of your choice, then move the overflow and max-height properties to said element. You will then be able to use margin in place of padding to maintain whitespace across the bottom:

.description {
    max-height: 360px;
    overflow: auto;
    margin: 10px;
}

Example in practice

If you choose to leave the title / subtitle outside of this nested element, this method will have the added benefit of keeping your title and subtitle in place as you scroll :-)

Upvotes: 2

Karma
Karma

Reputation: 1

You can try including the box-sizing property to constrain the padding and border to the elements width and height ..

.test {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Upvotes: 0

Related Questions