Reputation: 3

paragraph exceeds the maximum width of the page

http://imageshack.us/photo/my-images/690/printef.jpg/ the text goes out of the body page and I don't know why is this happening. the text should start from another line at the blue line.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script type="text/javascript" href=""></script>
    <title> tech </title>
</head>

<body id="skin" style="background-image:url(img/bck.jpg)">
    <div id="root">
        <div id="Meniu_header">
            <div id="top">
                <header id="top_header" style="background-image: url(top.jpg)">
                    <img src="img/200.jpg">
                    <h1 id="h1"> UNDER CONSTRUCTION </h1>
                </header>

                <nav id="meniu">
                        <ul>
                            <li> Acasa </li>
                            <li> Servicii </li>
                            <li> Contact </li>
                        </ul>
                </nav>
            </div>
        </div>

            <div id="test">
                <h2> sajbvljaslblas </h2>
                <p> afjkvbafjlbljabadflblajjlaerbladfblaerjlblae </p>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br />
            </div>

            <div id="pagina">           
                <div id="stanga">
                    <div id="optiuni">
                        <ul id="st_optiuni">
                            <li> Aluminiu </li>
                            <li> Plastic </li>
                            <li> Fonta </li>
                            <li> Otel </li>
                        </ul>
                        <div id="st_scris">
                            <p> adbnaeasfbabfa </p>
                            <p> adfbadf fsdbhadad </p>
                            <p> adfbad af afsd </p>
                            <p> a dfbad  </p>
                            <p>  adfba fa fd</p>
                            <p> adfb adf  adfb </p>
                            <p> adfb adfb ad </p>
                        </div>
                    </div>
                </div>


            <div id="dreapta">
            <section id="dr_articole">
                <article>
                    <header>
                        <h2> Titlu </h2>
                        <p class="problema"> This is a long text that it's makeing me problems ..........aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa </p>
                    </header>
                </article>
            </section>
            </div>
            </div>

        <footer>
            <p id="footer"> Copyright © 2013    </p>
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/ro/"><img alt="Licenţa Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/ro/80x15.png" /></a>.
        </footer>

    </div>

</body>

</html>

and the css is:

*{
    margin: 0px;
    padding: 0px;
}
header, nav, section, article, footer{
    display: block;
}
body{
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}
footer{
    display: -webkit-box;
    -webkit-box-pack: center;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}
#skin{
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#root{
    max-width: 1000px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
    border: 2px solid white;
}
#top{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
#top_header{
    display: -webkit-box;
    -webkit-box-orient: horizoantal;
    padding: 20px;
}
#h1{
    border: 1px solid red;
    font: 50px bold Arial;
    color: #FFFFFF;
    margin-left: 50px;
}
#meniu{
    color: white;
    display: -webkit-box;
    -webkit-box-orient: horizoantal;
    background: green;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#meniu li{
    display: inline-block;
    text-decoration: none;
    list-style: none;
    padding: 5px;
    font: bold 17px Tahoma;
}
#test{
    border: 2px solid red;
    width: 800px;
    height: 400px;
    margin-top: 20px;
    margin-left: 100px;
}
#pagina{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    margin-top: 50px;
    border: 4px solid blue;
}
#stanga{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    border: 3px dashed red;
}
#st_optiuni{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px;
    list-style: none;
    padding: 5px 5px 5px 10px;
    margin-top: 50px;
    border-radius: 8px;
    color: #FFFFFF;
    border: 2px solid yellow;
}
#st_scris{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px;
    list-style: none;
    padding: 5px 5px 5px 10px;
    margin-top: 50px;
    border-radius: 8px;
    color: #FFFFFF;
    border: 2px solid yellow;
}
#dreapta{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
#dr_articol{
    -webkit-box-flex: 1;
    border: 1px dashed yellow;
}
.problema{
    color: white;
}

Upvotes: 0

Answers (3)

Yu Yu

Reputation: 21

This is my first attempt so pardon me for any mistakes.

You will have to specify the width of the container 'div' so elements inside won't go beyond the parent's width.

Following will be a quick fix for your page:

#dreapta{
    width: 520px;
    padding: 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

Upvotes: 0

klewis

Reputation: 8350

One healthy start is to force your parent containers to be relative and in-scope of the browser width. Then work your day down to your specific child elements that appear to be going out of range. Google Chrome's developer tools is a great resource for debugging issues like this.

Upvotes: 0

Axente Paul

Reputation: 553

Use word-wrap: break-word; this way every time a word "wan't to get out" of the container the css rule will break the world on a new line.

* It's a CSS3 property.

More about this you can find out at W3C here's a link. word-wrap specs

Upvotes: 4

paragraph exceeds the maximum width of the page

Answers (3)

Related Questions