Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Safari
Screenshot of problem : https://i.imgur.com/3bvqGZI.png
Who the problem concerns : Yourself
Forum link : http://strawhats.forumotion.com

Description of problem

The text in the code spills out of the box. I need it to not do that. If someone could help me that'd be appreciated =/.

Code:


<div style="width: 700px; border: 10px solid #000000; height: 150px;"><div style="background:#FFF; border: 3px solid #851C04; height: 147px;"><div style="font: 35px Tulpen One; color: #000; margin-top: 0px;text-align: left; border-bottom:2px dashed #000000; width: 511px;">NEWS</div><div style="background:#e8e8e8; border: 2px solid #000000; width; 700px; height: 101px; text-align: justify;">INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATIONINFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION</div></div></div>

That code is in AP->General->Announcements as its own custom announcement.

Hi there,

This should help. You had to remove any height properties from the div elements.

You also needed to add the css white-space:pre-line on the last div so the text stays in the element.

Code:

<div style="width: 700px; border: 10px solid #000000;">
  <div style="background:#FFF; border: 3px solid #851C04;">
    <div style="font: 35px Tulpen One; color: #000; margin-top: 0px;text-align: left; border-bottom:2px dashed #000000; width: 511px;">NEWS</div>
    <div style="background:#e8e8e8; border: 2px solid #000000; width; 700px;text-align: justify;padding: 2px;white-space:pre-line !important;">INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATIONINFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION INFORMATION
    </div>
  </div>
</div>