CODEWITHSUNDEEP
javascripthtmlcss
Web-Student214
Web-Student214

Reputation: 127

how to prevent div text from overflowing container

i have text that i included in a div. i adding a padding left of 20px to it and i think that is why the text is overflowing out of the div to the right but is there anyway to prevent this? Here is the code. 

.trainer-wrapper{
    position: relative;
    width: 100%;
    height: 700px;
    background-color: #F6F6F6;
}

.top-trainer{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
}

#bottom-trainer{
    position: relative;
    width: 100%;
    height: 100px;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    overflow: hidden;
    padding-left: 20px;
    word-wrap: break-word;
}

#the-team{
    padding-left: 20px;
    padding-top: 20px;
    font-size: 42px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: black;
}

span{
    border-bottom: 1px solid black;
}
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "main.css">
         <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
    </head>

<body>
    <div class = "trainer-wrapper">
        <div class = "top-trainer">
            <h2 id = "the-team"><span>The Team</span></h2>
        </div>

        <div id = "bottom-trainer">At Vizion Fitness we have assembled the greatest trainers in the country to help our customers achieve their dream body. Our trainers are all NSCA certified and have established themselves as being one of the best at what they do. Whether it be atheltes or commited individuals wanting to improve themselves, we have the team to help you achieve your goals. Each of our trainers specializes in a specific sport for athletes wanting to improve their skills however they are all trainers for any individual. Come check out the best team in DFW metroplex!</div>
    </div>

</body>
</html>

Upvotes: 2

Views: 1736

Answers (1)

Dekel
Dekel

Reputation: 62676

Just remove the width: 100% from the #bottom-trainer:

.trainer-wrapper{
    position: relative;
    width: 100%;
    height: 700px;
    background-color: #F6F6F6;
}

.top-trainer{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
}

#bottom-trainer{
    position: relative;
    height: 100px;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    overflow: hidden;
    padding-left: 20px;
    word-wrap: break-word;
}

#the-team{
    padding-left: 20px;
    padding-top: 20px;
    font-size: 42px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: black;
}

span{
    border-bottom: 1px solid black;
}
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "main.css">
         <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
    </head>

<body>
    <div class = "trainer-wrapper">
        <div class = "top-trainer">
            <h2 id = "the-team"><span>The Team</span></h2>
        </div>

        <div id = "bottom-trainer">At Vizion Fitness we have assembled the greatest trainers in the country to help our customers achieve their dream body. Our trainers are all NSCA certified and have established themselves as being one of the best at what they do. Whether it be atheltes or commited individuals wanting to improve themselves, we have the team to help you achieve your goals. Each of our trainers specializes in a specific sport for athletes wanting to improve their skills however they are all trainers for any individual. Come check out the best team in DFW metroplex!</div>
    </div>

</body>
</html>

By setting that div's width to 100% it actually get the width of it's parent. The problem is that you also have padding-left of 20px, and it moves that element 20px to the right.

Upvotes: 3

Related Questions