DIV using CSS layout Basic

Question

hi guys i'm trying to create a layout and understand using CSS and div. it seems like i'm having a hard time making the center column fixed in the center, cause everytime i type a long text it exceeds the right column, what's the best way to avoid this? Any easier method to use to understand? i'm beginner and i used to use TABLES AND TD's, it's easier to understand, but i'm trying to catch up with divs cause tables and rows seems obsolete. Please help thanks.

Here's my code: http://jsfiddle.net/CVXKn/2/

<div id="wrapper" align="center">

        <div id="wrapper_inner">

            <div id="menubar">MENU BAR GOES HERE</div>

            <div id="headerContainer">Header LOGO Goes here</div>

            <div id="bodyContainer">

                <div id="left"> </div>

                <div id="center"> gegggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
                    <div id="centerEnter"> </div>

                <div id="right"> </div>
                <div class="clear"> </div>

            </div>   

            <div id="footerContainer">Footer Goes Here</div>

         </div>

     </div>  

Answer 1

You can use this css

#center {
word-wrap:break-word;
}

Answer 2

Your problem is that you're using a single unbroken "word" to test your layout. A sentence will be cut off when there isn't enough space for the next word and will force a new line and keep going til there's no more text.

As others have pointed out, if you need to use lots of big words that'll break your layout use word-wrap: break-word; to break them where appropriate.

Answer 3

word-wrap: break-word;

In the CSS of the center div should fix it.

Answer 4

You should set the word-wrap property on #center to break-word.

#center
{
  word-wrap: break-word;
}

Here's a jsFiddle

Here's a link to information about word-wrap.

Answer 5

Add this to your CSS, this will break long words

#center {
    word-wrap:break-word;
}