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

Question

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

2.2k views Asked by Ken Kwok At 14 September 2024 at 15:58

<!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?

Original Q&A

There are 2 answers

Michael Jones On 23 June 2015 at 09:17

What you would like is very simple. First off lets say you would like it to move to the next line of text if it is perhaps 50% of the parent's width. You would use the property max-width in CSS. Here is an example:

HTML
----------
<div id="parent">
    <div id="child">
        This text will eventually overflow.
    </div>
</div>

CSS
----------
#parent {
     width: 500px;
     height: 100px;
     background-color: red;
}
#child {
     max-width: 50%; /* 50% is the width used for the example */
}

So as you can see max-width can achieve this for you. If you would like I posted a JSFiddle for you.

**Yury Andreykovich** · Accepted Answer · 2015-06-23 09:24:14

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>

TechQA.

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

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in LIQUID-LAYOUT

Popular Questions

Popular Tags

Trending Questions