Keeping Variable Content In the Box

Forum Moderators: not2easy

Message Too Old, No Replies

Keeping Variable Content In the Box

rocknbil

8:05 pm on Mar 5, 2009 (gmt 0)

<div style="width:200px">
<h5>We know what happens here. The head hangs out of the box, often overlaying adjoining content.</h5>
</div>

I've always worked around this one locally but have never asked, or pursued, a positive solution to keep user-generated content IN THE BOX! Sure a table makes it easy. It just flows it on multiple lines. Which is what a div *should* do intuitively . . . but does not.

Is there a respectable approach to this, where the h5 above can vary in length?

swa66

12:39 am on Mar 6, 2009 (gmt 0)

Hmm, wondering what environment you have around that code as that div will in fact stretch vertically to encompass the content while th eh5's content gets contained.

E.g. og how it works as expected in FF3 and IE6:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
  <title>untitled</title>
  <style type="text/css">
   * {
    padding: 0;
    margin: 0;
   }
  </style>
 </head>
 <body>
  <div style="width:200px; background-color: yellow">
   <h5>We know what happens here. The head hangs out of the box, often overla
ying adjoining content.</h5>
  </div> 
 </body>
</html>

rocknbil

5:12 pm on Mar 6, 2009 (gmt 0)

I'm busted . . THIS TIME!

white-space: nowrap;

DOH! It was in a parent selector. Feelin' smart today . . .

However, this does come up from time to time, and it's seldom a nowrap issue . . . . with images, it's easy to "do the math" on padding and margin and see why, but every now and then I get a text block that won't play along and I do a local fix . . . I will watch for it, I'm sure it will come up again. :-(