My text inside the containing div overflows it from the sides where it should be actually wrapping automatically.
html {
padding: 0;
margin: 0;
}
body {
background: #E4E4E4;
height: 100%;
width: 100%;
}
#main {
display: block;
background: white;
width: 960px;
margin: 0 auto;
position: relative;
padding: 5px 5px;
}
<body>
<div id="main">
<p>jjfaljfejjfkadjf;lj;jmvwutpvwjfjdsjfklsdkdfjklsjfkljwjeiojfklslfkjsvfoiwjeorfjviw nfwvfjojwkdsklflskjfvwiernvejveurvnwejfkdsjwjjrfjiowjeionvkjlksjdfkljkljdwijiodjfiovnwjoiejoijfiojkjsljfdkjslfiejskdklfjlksjfeijskdjfklsjkldjfwjnfklsjfwoevjnwfdjshfk
fsdkjfsjdfkjksjdfkjsljfdkljskl
</p>
</div>
</body>
</html>
And here is what is displayed:
I have read other questions but none of them solves my issue. The thing is that the text does not overflow the bottom of the div. Is it something to do with the width I have set for the div?
word-wrap: break-word;
but I don't see any issue here in your provided markup