Text not staying inside div

Question

I have a div that text will just not stay in and I have no idea why, I have never run into this issue before Im hoping some people can help me out, heres my code:

HTML:

#toronto-content {
  position: relative;
  z-index: 98;
  height: 100%;
  width: 700px;
  background-color: #0A0A0A;
  color: #FFF;
}

<div id="toronto-content">

  Interactively pursue long-term high-impact vortals and distributed systems. Competently streamline team driven testing procedures without leading-edge intellectual capital. Energistically engage market-driven catalysts for change via client-centered technologies.
  Compellingly architect long-term high-impact intellectual capital and resource-leveling interfaces. Phosfluorescently initiate market positioning supply chains with stand-alone processes. Collaboratively generate leading-edge services for synergistic
  e-markets. Conveniently syndicate bleeding-edge resources whereas equity invested scenarios. Collaboratively parallel task backward-compatible deliverables and business relationships. Assertively implement turnkey niche markets for technically sound
  human capital. Collaboratively integrate pandemic niche markets with corporate action items. Quickly utilize timely paradigms after best-of-breed infomediaries. Appropriately drive future-proof initiatives via standards compliant opportunities. Uniquely
  coordinate 24/365 mindshare vis-a-vis top-line synergy. Phosfluorescently benchmark one-to-one mindshare with high-payoff best practices. Distinctively supply principle-centered relationships whereas revolutionary relationships.

</div>

if you want to check out the full site its here: http://lasociete.ca/new/

Answer 1

This will solve your issue:

#toronto-content {
  white-space: normal;
}

But I would consider putting your text into a <p> or <span> tag.

Answer 2

That's because the amount of text is larger than the div.
I recommend adding overflow:overlay to your style, this will create a vertical scroll bar right next to the content.

If you add overflow:scroll it will create a horizontal scroll-bar even if there's no need for one.

If that's not what you want, you should either add pages when there's too much content (called "pagination") or make a custom vertical scrollbar with Javascript or jQuery.

Answer 3

Add this

#toronto-content {
  white-space: normal;
  overflow: hidden;
}