CODEWITHSUNDEEP
htmlcss
user2495814
user2495814

Reputation: 35

HTML/CSS Text will not follow div

The <p> tag that is located inside of a div will not break when reaching the max-width. I know some lines of code are not needed for anything but I don't even know anymore...

<body>

    <div id="bigBox">

        <div id="body">         
            <h1>Min profilsida</h1>

            <div id="navBar">
                <ul>
                    <li><a href="ProfilSida.html">Hem</a></li>
                    <li><a href="CvSida.html">Cv</a></li>
                    <li><a href="PortfolioSida.html">Portfolio</a></li>
                </ul>
            </div>

        <h2>Mitt namn är Albin Öhman</h2>

        <img src="bilder/Albiegrdn.png">    

        <div class="textbox">
            <p>fgodsfjklgdsflgjhhhhhhhhyukggggggggggggggggggggggggggggggggggggyyygdsfdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
        </div>

        </div>


    </div>

</body>



 #body{
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    width: 850px;
    height: 790px;
    margin: 0px auto;
    top: 10px;
    background-color: #808080;
}


 .textbox{
    padding: 10px;
    background-color: red;
    width: 425px;
    height: 500px;
    position: relative;
    left: 350px;
    top: -450px;
}





   body{
    width: 1000px;
    margin: 0px auto;
    position: relative;
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#bigBox{
    padding: 0;
    background-color: #424747;
    width: 1000px;
    height: 810px;
    position: relative;
}

Upvotes: 2

Views: 777

Answers (3)

Ali Zand
Ali Zand

Reputation: 41

What do you mean "will not break when reached the max-width?" are you referring to the

content continuing on passed the width of the ? if so then try this post

Wordwrap within css div

so basically what you need to do is to either make the horizontal overflow to be set as scroll so you can scroll left and right as needed or turn on the word_wrap so as soon as it hits the end of the width, it starts a new line.

Upvotes: 0

Andrew Ames
Andrew Ames

Reputation: 141

You aren't actually setting max width anywhere only width. Also it will not break if the text within it has no spaces. The string needs to be broken up for it to break at a given line space

Upvotes: -1

LcSalazar
LcSalazar

Reputation: 16831

This should help:

p {
    word-break: break-all;
}

Or a more general property:

p {
    word-wrap: break-word;
}

Paragraphs won't break a non-spaced word, unless you tell it to:

.textbox{
    padding: 10px;
    background-color: red;
    width: 425px;
    height: 500px;
}

p {
    word-break: break-all;
}
<div class="textbox">
  <p>fgodsfjklgdsflgjhhhhhhhhyukggggggggggggggggggggggggggggggggggggyyygdsfdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

Upvotes: 3

Related Questions