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>

Tables are not obsolete, they are just best used with tabular data. — slash197
– slash197, Commented Sep 4, 2013 at 8:43

Mathijs Flietstra · Accepted Answer · 2013-09-04 08:43:09Z

2

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.

answered Sep 4, 2013 at 8:43

Mathijs Flietstra

13k3 gold badges42 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slash197 · Accepted Answer · 2013-09-04 08:42:59Z

0

Add this to your CSS, this will break long words

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

answered Sep 4, 2013 at 8:42

slash197

9,0246 gold badges44 silver badges71 bronze badges

Comments

Palin Revno · Accepted Answer · 2013-09-04 08:44:00Z

0

word-wrap: break-word;

In the CSS of the center div should fix it.

answered Sep 4, 2013 at 8:44

Palin Revno

5864 silver badges11 bronze badges

Comments

everydayghost · Accepted Answer · 2013-09-04 08:44:09Z

0

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.

answered Sep 4, 2013 at 8:44

everydayghost

6911 gold badge7 silver badges12 bronze badges

Comments

Love Trivedi · Accepted Answer · 2013-09-04 09:15:44Z

0

You can use this css

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

answered Sep 4, 2013 at 9:15

Love Trivedi

4,0913 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

DIV using CSS layout Basic

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related