Hey everyone. I have a bit of a quandary. I have a scroll area
implemented with a div box, which itself is inside of a fieldset for a
form. I have another div area nested inside of this one with a width of
50%, which should, I assume, make it 50% of the width of the parent div
area (the scroll area.)
Below I've posted the CSS, followed by a sample HTML file showing the
hierarchy of elements. In the most deeply nested div box (with a class
of "definition"), 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; in Firefox, it always
spills over the side of the scroll area (the parent div area) and causes
the scrollarea to require me to scroll to the right, and in Opera, it
just cuts off beyond the edge of the scroll area without wrapping.
Does anyone know how I can make this work or if anything's wrong with my
code? Maybe I'm making false assumptions about the behavior I should be
expecting.
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 (this is the text that doesn't wrap
according to the specified width of a definition div box)
</div>
</div>
</fieldset>
</div>
James
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
