Something random has started happening the last few days on one of my sites. The paragraph goes outside of the div, until I right-click and open the designer-tool in Chrome. When I do the paragraph jumps into the right place without me changing anything. :S

 

Same goes with some links in paragraphs, they clump together with the text beside it. Then when I open the designer-tool they go into their right place.

 

So I'm very confused as of what causes this and how I fix it. Anyone else knows?

For someone to help, they're going to need a link to the code.

 

The website it happens randomly at is cuteness.se

Looks like you have unclosed and stray element tags in your markup. That would create exactly the type of problems you describe. (dont know why it happens randomly though)

You also have duplacate ids and other serious errors:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.cuteness.se%2F

Fix the errors and I'm sure the problems will be solved.

Edited March 24, 201511 yr by Nillervision

<html lang="en">

div {
display:block;
width:yourwidth:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}

Take a look also on

word-wrap: break-word; /*better*/
word-break: break-all;

More information

 

If you don't want words to be broken on site try this

* { -webkit-hyphens: none; }

Source

Edited March 24, 201511 yr by fleur

also your measure (line length) is pretty wide in the normal text, consider adding some margins; and the line-height is way too much - bring it back to around 1.2. not sure about the justified text either - leaves large gaps between words

Thank you so much for your help Nillervision and fleur. I will try that out later today.

 

Davep: What screen-res do you have and what browser do you use?

1280 x 1024 latest firefox (not beta or developer edition or anything... )