My Post Breaks My Website's Layout..!

[web_designer 7]

hi, i encountered this problem yesterday in my blog. i was trying to post the weekly tutorial but i couldn't, every time i preview the post i got this weird look of my post.

 

 

 

 

as you can see both the text and codes are breaking the layout. for the first time i assumed that it is a code problem even this is not the first time i post codes directly to the blog. anyway, i installed this plugin (syntaxhighlighter-plus). but nothing changed, in fact things getting worse. right now, i can't think of more solutions so i decided to post here asking for your help, thank you in advance.

[truefusion 3]

For browsers that support word wrap, you can try the following CSS on the parent container:

word-wrap: break-word;

For those that don't (i.e. Internet Explorer), you can try the following on the child containers:

overflow: auto;

The former should work without adding an "ugly" scroll bar.

[web_designer 7]

thank you for your reply truefusion, i just added the code you gave me but no change at all, still the same problem. on the other hand, i think it is not a browser's problem, because browsers show my other posts very good. the problem is only with this post. i tried to post just texts without codes and it works. so i will double check the code and see.

[truefusion 3]

What browser(s) are you noticing this in? I know that DIV elements aren't as strict with boundaries as tables are, and content without spaces will break out of the element's boundary if it is long enough (though images are another story), but the solutions i've mentioned have always worked for me (where supported), so i find it a bit odd that they didn't for you (though i find it more odd that the screenshot you show shows that there is spaces between the text). But i should have mentioned that the CSS property overflow tends to require that the element it is applied to has to have predefined dimensions set to it: a width and or height is to be defined.

[web_designer 7]

this problem shows in firefox, opera and internet explorer 6. as i mentioned before this appears only when i use codes, even this is not the first time i use codes but seems there's something in this codes breaks the boundaries. anyway, i tried many plugins to separate the code from the text. and it didn't work for me in the beginning, but after more researching i found that i should add this wordpress function to the footer

 

<?php wp_footer(); ?>

so, i used this plugin (SyntaxHighlighter Evolved) and added wordpress function to the footer and it worked, the code displayed perfectly inside the layout as it should be but in the code area i still see these tags display with the code:

 

<strong> or <pre>

i tried to delete them manually, but this is even more annoying than before. so, if anyone have any idea to deal with that i would be appreciated.

 

so i find it a bit odd that they didn't for you (though i find it more odd that the screenshot you show shows that there is spaces between the text). But i should have mentioned that the CSS property overflow tends to require that the element it is applied to has to have predefined dimensions set to it: a width and or height is to be defined.

 

well truefusion, i find it odd too but i don't know why. even i added it to the parent container div tag as you said ( i have one container wrapped the post area and sidebar and i added the first code you gave me to it but nothing changed). i will try it again and see because i got now a lot of plugins in my site, the last one make the "pinned notepad" i use for category fly away in opera

 

about width and height, i already defined each div with specific width and height in my css. and the spaces between text in my screen-shoots i don't fully remember how i took the screen shoots i was in a haste. but in general when i post, i always got a post with no spaces at all and i add spaces manually using

 

<br /> 

thank you for your help and replies.