The text in the red border wont stay into the continut-a div

Question

I am new to css.

Please help me fix this problem with the text that is in the paragraph class, the text goes out of the div.

I am not sure what triggers that reaction, because there are a lot of div's everyone with his specific class or ID.

I am interested that the text that goes in the div class="continut-a" NOT to go ouside the div, but to break down to lines inside the div.

I hope I was clearly on this.

HTML is here:

<div id="content" >
    <div id="wrap">

            <div class="leftup"> </div>
            <div class="centerup"> </div>
            <div class="rightup"> </div>
            <div class="clearBoth"> </div>

            <div class="left"> </div>
            <div class="center">

                    <div class="continut-a">
                    <p class="title">Mobile applications</p>
                    <span class="paragraph">On demand of the world evolution, 
                    we can stand and create ideal mobile applications that 
                    will help your customers clearly use your products even 
                    on their smartphones, from everywere!</span>
                    </div>
                    <div class="continut-b">
                    <p class="title">Web designs</p>
                    </div>
                    <div class="continut-c">
                    <p class="title">Custom applications</p>
                    </div>

            </div>
            <div class="right"> </div>
            <div class="clearBoth"> </div>

            <div class="leftdown"> </div>
            <div class="centerdown"> </div>
            <div class="rightdown"> </div>
            <div class="clearBoth"> </div>

        </div>


</div>

And the CSS down:

#content {
width: 85%; 
height: relative; 
margin: 0 auto; 
padding: 0; 
/*float: left;*/ 
position: relative;
border: 1px solid red;
}

#wrap {
width: 99%;
white-space:nowrap;
margin: 0 auto;
padding: 0;
position: relative;
border: 2px solid blue;
}

.leftup{
width: 50px;
height:20px;
float: left;
background-image: url(media/up-left-corner.png);
background-repeat:no-repeat;
background-position:right;
}
.left {
width: 50px;
height: 350px;
float: left;
background-image: url(media/left-margin.png);
background-repeat: repeat-y;
background-position:right;
}
.leftdown {
width: 50px;
height: 35px;
float: left;
background-image:url(media/left-down-corner.png);
background-repeat:no-repeat;
background-position: right, top;

}
.centerup {
float: left;
height:20px;
width: 960px;
position: relative;
background-image:url(media/top-margin.png);
background-repeat:repeat-x;
}
.center {
float: left;
width: 960px;
height: 350px;
position: relative;
background-image:url(media/centerfill.png);
background-repeat:repeat-x, repeat-y;
margin: 0 auto;

}
.centerdown {
height:35px;
float: left;
width: 960px;
position: relative;
background-image: url(media/bottom-margin.png);
background-repeat:repeat-x;

}
.rightup {
width: 50px;
height:20px;
float: left;
background-image: url(media/right-up-corner.png);
background-repeat:no-repeat;
}
.right {
width: 50px;
height: 350px;
float: left;
background-image:url(media/right-margin.png);
background-repeat: repeat-y;
}
.rightdown {
width: 50px;
height:35px;
float: left;
background-image: url(media/right-down-corner.png);
background-repeat:no-repeat;
}

.clearBoth {
clear: both;
}
textarea {
width: 200px;
height: 100px;
resize: none;
}

.continut-a, .continut-b, .continut-c{
    height: 99%;
    min-height: 300px;
    width: 310px;
    border: 1px solid green;
    float: left;
    display: inline-block;
}
.paragraph {
height: 20px;
font-family: Aspergit;
font-size: 10pt;
color: black;
border: 1px solid red;
}
.title{
font-family: Aspergit;
font-size: 15pt;
text-align: center;
font-weight: bold;

}

Answer 1

Ok, on the .paragraph you want to add the following css:

display: block;
overflow: auto;

That tells the browser to make the element(s) block level so they fit within their parent, and to let the browser figure out what to do with anything that overflows the container. You will also need to remove the height parameter if you want the browser to figure out the correct height with and without the scroll-bar.

To have the text wrap instead of overflowing you either need to remove the whitespace: no-wrap from the #wrap container since style cascade down through children or add:

white-space: normal;

and in both cases remove the:

overflow: auto;

from the .paragraph selector

Here is a working jsFiddle: http://jsfiddle.net/D7suu/1/

Here is the updated jsFiddle: http://jsfiddle.net/D7suu/2/