Can I limit the width of element relative to its parent?

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>KPMG HTML5 TEST</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="m5.css">
</head>
<body>
  <div class="content">
    <header class="header">
      <p>testing for responsiveness</p>
    </header>
    <div class="nav">
      <p>testing for responsiveness</p>
    </div>
    <div class="upper_left">
      <p>testing for responsiveness</p>
    </div>
    <div class="upper_right">
      <p>testing for responsiveness</p>
    </div>
    <div class="left">
      <p>testing for responsiveness</p>
    </div>
    <div class="center">
      <p>testing for responsiveness</p>
    </div>
    <div class="right">
      <p>testing for responsivenedddddddddddddddddddddddddddddddsssssssssssssSSSSSSSSss</p>
    </div>
    <footer class="footer">
      <p>testing for responsiveness</p>
    </footer>
  </div>
</body>
</html>

I am trying to create a website with responsive web design. Here's my CSS file.

*{
    box-sizing: border-box;
}
.content{
    width:67.625%;
    position: relative;
}
.upper_left,.left{
    float:left;
}
.upper_right,.center, .right{
    float:left;
    margin-left: 1.663586%;  /*18px*/
}

.upper_left{
    width:74.5841%;
}
.upper_right{
    width:23.752311%;
}
.left{
    width:23.752311%;
}
.center{
    width:49.168207%;
}
.right{
    width:23.752311%;
    position: relative;
}

Since I want to create a website with width 67.625%only (1082px out of 1600), I want paragraph on div right to move to next line when it exceeds the width 23.752% of content(67.652% of the monitor). I tried to make the position of content class and right class relative but it does not work. Is there any way this could be solved?

Solution

You should add word-break: break-all; to the .right class.

Like this:

 *{
    box-sizing: border-box;
}
.content{
background:#eee;
    width:67.625%;
    position: relative;
}
.upper_left,.left{
    float:left;
	background:#ddd;
}
.upper_right,.center, .right{
    float:left;
    margin-left: 1.663586%;  /*18px*/
	background:#ccc;
}

.upper_left{
    width:74.5841%;
}
.upper_right{
    width:23.752311%;
}
.left{
    width:23.752311%;
}
.center{
    width:49.168207%;
}
.right{
    width:23.752311%;
    position: relative;
   word-break: break-all;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>KPMG HTML5 TEST</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>
  <div class="content">
    <header class="header">
      <p>testing for responsiveness</p>
    </header>
    <div class="nav">
      <p>testing for responsiveness</p>
    </div>
    <div class="upper_left">
      <p>testing for responsiveness</p>
    </div>
    <div class="upper_right">
      <p>testing for responsiveness</p>
    </div>
    <div class="left">
      <p>testing for responsiveness</p>
    </div>
    <div class="center">
      <p>testing for responsiveness</p>
    </div>
    <div class="right">
      <p>testing for responsivenedddddddddddddddddddddddddddddddsssssssssssssSSSSSSSSss</p>
    </div>
    <footer class="footer">
      <p>testing for responsiveness</p>
    </footer>
  </div>
</body>
</html>