CSS无法包裹我的文字

Question

Surely im missing somthing simple here! i have tryed fixes from other topics but everything i try just seems to make the problem worse. Any help any you could provide would be wonderful!

Basics: Im trying to make a web page that has a fixed headder. under that a fixed menu. then area for content / text / pictures. and on the right hand side a side bar where i can put buttons / calls to action.

im 90% there but i cant get my text to wrap. i have tried various things. either my text goes over the top of or under the side bar. maybe im thinking about this totally the wrong way.

*Edit im explaing my self a little wrong. i would like the side bar to be the thing that makes the text wrap.

The code im using...

.cent {
  width: 984px ;
  margin-left: auto ;
  margin-right: auto ;
}


.main {
 clear: both; 
    display: block; 
    width: 964px; 
    padding: 0px;
    margin:189px 0px 0px 10px;
    font-family:Arial, Helvetica, sans-serif;
    background:#FF0;
}

.ctar{
    float:right;  
    display:inline;
    padding: 0px;
    margin:0px -10px 0px 10px;
    background: #F0F ;
    width: 200px;
    right:0px;
    bottom:0px;
    top:0px;

}

i have created a JSFiddle here incase some other code was affecting it

Thanks in advance!

Answer 1

you might want to give the non-sidebar content a width too. Check this jsfiddle I just made for you: http://jsfiddle.net/mY584/3/

CSS added:

#bodycontent{
float:left;
padding: 0px;
margin:0px -10px 0px 0px;
background: #F0F;
width: 740px;
right:0px;
bottom:0px;
top:0px;
word-wrap:break-word;}

Answer 2

LIke this just add word-wrap:break-word; in selector p

demo

css

p{
    word-wrap:break-word;
}