How to stop text from overlapping CSS? - css

Question

Im creating a website for college and Im not sure how to stop text from overlapping when I make the web browser smaller. This is what I mean:
(not overlapping)
(overlapping)
Here is my jsfiddle: (http://jsfiddle.net/RC4Ar/)
.words {
font-family:apple;
font-size:20px;
max-width:800px;
height:190px;
margin-top:10px;
margin-left:42%;
}
Thanks in advance!

Answer 1

Assuming you are adding the words class to the paragraph tags (without your html, we can only guess), you simply need to remove the height declaration.
.words {
font-family: apple;
font-size: 20px;
max-width: 800px;
margin-top: 10px;
margin-left: 42%; }

Answer 2

For your fiddle example, I would change the title_bar to have a min height instead of a fixed height. This will allow it to be responsive instead of overlapping over the following text.
#title_bar {
margin-top:78px;
left:-17px;
width:101.5%;
min-height:30px;
background:blue;
position:relative;
top:-70px;
z-index:3;
border: 3px rgba(255, 105, 180, 1) solid;
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
}
Fiddle