<p>I have this div:</p> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>#edj{ width:50%; border-style: solid; border-width: 5px; }</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code></style> </head> <body> <div id = "edj"> <p><label>Faculty <input type="text" class = "k"> </label></p> <p><label >Departmet <input type="text" class = "k"> </label> </div></code></pre> </div> </div> <p>I want to make textboxes width 30 percent of the div width.</p> <p>How can I implement this using css code?</p>

<p>This is an answer in it's simplest form, this will make input fields 30% of parents width.</p> <pre class="prettyprint"><code>input { width: 30%; } </code></pre>

How to make child element width 30 precent of parent elements width using css?

Tags:

html

css

I have this div:

#edj{
 width:50%;
 border-style: solid;
border-width: 5px;
}

</style>
</head>
<body>
<div id = "edj">
<p><label>Faculty <input type="text" class = "k"> </label></p>
<p><label >Departmet <input type="text" class = "k"> </label>
</div>

I want to make textboxes width 30 percent of the div width.

How can I implement this using css code?