Text flows out of containing Div [closed] - php

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a forum system in php, but when the posts come out, if they're long, they end up like this,
html,
body {
height:100%;
width:100%;
background: url(/include/images/dirt.png);
}
.center-container {
margin-top:15px;
margin-right:15%;
margin-left: 15%;
box-shadow: 0 1px 10px #a7a7a7, 0 1px 0 #fff;
padding:0.5em;
}
.button {
border-top: 1px solid #002136;
background: #033e66;
background: -webkit-gradient(linear, left top, left bottom, from(#031826), to(#033e66));
background: -webkit-linear-gradient(top, #031826, #033e66);
background: -moz-linear-gradient(top, #031826, #033e66);
background: -ms-linear-gradient(top, #031826, #033e66);
background: -o-linear-gradient(top, #031826, #033e66);
padding: 5px 10px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
padding-bottom:3px;
margin-right:5px;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
.sidebar1 {
margin-top:15px;
float:left;
width:13%;
display:inline-block;
box-shadow: 0 1px 10px #a7a7a7, 0 1px 0 #fff;
}
.sbutton {
border-top: 1px solid #002136;
background: #033e66;
background: -webkit-gradient(linear, left top, left bottom, from(#031826), to(#033e66));
background: -webkit-linear-gradient(top, #031826, #033e66);
background: -moz-linear-gradient(top, #031826, #033e66);
background: -ms-linear-gradient(top, #031826, #033e66);
background: -o-linear-gradient(top, #031826, #033e66);
padding: 5px 10px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
padding-bottom:3px;
display:block;
}
.sbutton:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.sbutton:active {
border-top-color: #1b435e;
background: #1b435e;
}
is there a CSS rule that I can use to make that wrap to the next line?
EDIT: SOLVED! This actually seems to be a problem with Firefox. Not sure why, but if width is set in firefox, even if it is max-width, it will overflow the box for some reason

Answer 1

You can use the CSS3 text-wrap Property:
http://www.w3schools.com/cssref/css3_pr_text-wrap.asp
p.test {text-wrap:unrestricted;}

Answer 2

Your link doesn't work so I'm guessing here.
Most likely your div expands outside of the width of the screen, meaning that the content will to.
You could try to set the max-width property of your div to something like 80% (or less) and wrap any text in p-tags.
To be absolutely sure, combine that with superUntitled's answer and set:
p.test {word-wrap:break-word; }
EDIT
I tried your example and it works for me in this JsFiddle example
Try a css reset like this

Answer 3

yes, the CSS3 word-wrap in combination with the hyphen property
p.test {
word-wrap:break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/