CODEWITHSUNDEEP
htmlcss
The_Mundane
The_Mundane

Reputation: 107

Input size attribute vs div width attribute

In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.

Which attribute should I use to make the div's width match the input's size attribute?

code :

<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>

Upvotes: 0

Views: 980

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.

To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.

<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>

Upvotes: 2

Madhav
Madhav

Reputation: 248

try width attribute in both i.e. in input and div also , plus try to give width in %

html:

  <html>
  <input id="myinput"></input>
  <div id="myDiv"></div>
  </html>

css :

 #myDiv{
     width:x%(set x per your requirement)
 }

Upvotes: 1

Mohi
Mohi

Reputation: 1808

Use this style to set exact same width for both your input and your div

input#b, div#c {width:100px;}

Upvotes: 0

Related Questions