PDA

View Full Version : Scroll Bar in Fixed Height Div



tribethrow
18 Feb 2010, 02:06 PM
Is it possible to have a div that is.. say 500px and then have content in the div that is much longer than that, but to simply have a scroll bar appear in the div so that it remains at 500px?

Thanks for any help!

Alex

djlebarron
18 Feb 2010, 02:40 PM
<head>
<style type="text/css" media="screen">
#div1 {width:300px;height:500px;overflow:auto;}
p {width:260px;}
</style>
</head>
<body>
<div id="div1"><p>
Your content that is more than 500px in height goes here,
but it is kept at well less than 300px in width by the paragraph style
(so you have a vertical scroll bar but do not a horizontal scroll bar).
You can actually put another div in this one and give it a width that
is well less than 300px. That way you can put text, images, and
other objects in the "inner" div and keep from having a
horizontal scroll bar without using a p tag or having to
otherwise make sure that your content does not exceed
a total of 300px minus your padding, borders, margins,
and the width of the hoizontal scroll bar.
</p></div>
</body>
</html>And if you don't want to do the math and just want to set your inner div to 300px, you can put this in your stylesheet or <style> in the head:
#div1 {width:300px;height:500px;overflow-x:hidden;overflow-y:auto;}It may not work in older IE though. I can't remember.