 Newsletter sign-up (we value your privacy, unsubscribe at any time):
|
I've got a web page layout where I have three columns aligned horizontally - that is, they all have the same fixed height. I accomplished this by using the CSS declaration:
#div { height: 250px; max-height: 250px }
The problem is, if content goes beyond the bottom of this div, the bottom border of the div extends down to accommodate the new content, thereby disrupting my evenly laid out column borders. How do I make it so a vertical scrollbar appears instead of the border being pushed down?
Creating a vertical scrollbar in CSS is fairly painless. One thing you need to look out for is that none of the parent elements of the element you're creating the scrollbar for have the overflow attribute set.
Once you've confirmed that, all you need to do is set the overflow attribute to auto for the parent you wish to have scrollbars (in this case your fixed height column):
<div style="overflow: auto">
bla bla
</div>
The other values the overflow element can take on are inherit, visible, hidden, and scroll. With the inherit value, your div will take on the overflow attribute of its parent. If the overflow is set to visible, the text will flow over your container beyond the border. If the overflow attribute is set to hidden, the content will be cut off, but your containers height will be maintained and the layout won't be broken.
The last option, scroll, will force scrollbars to appear on your element. However, we recommend using auto, as the scrollbars will only appear is necessary. Unless you're a real fan of seeing scrollbars even when they're not necessary, we recommend taking this approach.
You should now be able to successfully create and define vertical scrollbars in CSS.
