No replies
crazydrclaw
Offline
newbie
Last seen: 12 years 11 weeks ago
Joined: 2009-09-08
Posts: 1
Points: 0

Hey everyone. I have a bit of a quandry. I have a scroll area implemented with a div box. The following is the CSS file, followed by a sample HTML file showing the hierarchy of elements. In the most deeply nested div box, I've tried specifying absolute as well as relative widths, but nothing gets the text to wrap. I've tried replacing that div box with both p and span elements, all with both relative and absolute widths, and I just can't get the text to wrap; it always spills over the side and causes the scrollarea to require me to scroll to the right, which is undesireable (I only want to have to scroll down.)

Does anyone know how I can make this work?

Thanks so much!

CSS:
 
.body {
 position: absolute;
 left: 340px;
 top: 75px;
 width: 600px;
 font-size: 10pt;
 font-family: sans-serif;
}
 
fieldset.normal {
   background-color: LightSteelBlue;
   width: 100%;
   margin-bottom: 15px;
}
 
div.definition {
   font-size: 0.85em;
   width: 50%;
   margin: 1%;
}
 
<div class="body">
 
   <form>
 
      <fieldset class="normal">
 
         <!-- This is the scroll area -->
         <div style="height: 200px; overflow: auto; border: solid 2px #999;
            margin-left: auto; margin-right: auto; background-color: #eee">
 
            <div class="definition">
               Text goes here
            </div>
 
         </div>
 
      </fieldset>
 
</div>