Creating input text using Css and HTML

advertisements

I Need to have a div tag with two rows of text boxes.

The first row has 3 input text boxes with width and height calculated based on percentage.

Likewise in second row i need 2 input text boxes. As i have two input boxes, the area should be broken into 2 blocks of 50% each.

I am new to CSS and HTML.

I have tried a bit of code. but, didn't work!

#div1
{
    position: absolute;
}
#div1 text
{
    display:inline;
    float:left;
    margin:33%
}
#div2
{
    position: relative;
}
#div2 text
{
    display:inline;
    float:left;
    margin:50%
}
</style>
</head>
<body>
    <div id="div1">
        <input type="text" name="txtbox1" class="clstxtbox1"/>
        <input type="text" name="txtbox2" class="clstxtbox1" />
        <input type="text" name="txtbox2" class="clstxtbox1" />
    </div>
    <div id="div2">
        <input type="text" name="txtbox1" class="clstxtbox2" />
        <input type="text" name="txtbox2" class="clstxtbox2" />
    </div>
</body>

Can anyone help me


You can use css3 flexbox:

HTML:

<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox1"/>
  ...
  ...
  <input type="text" name="txtbox2" class="clstxtbox1" />
</div>

CSS:

.input-holder {
  display: flex;
}

.input-holder input {
  flex-grow: 1;
}

.input-holder {
  margin-bottom: 10px;
  display: flex;
}

.input-holder input {
  flex-grow: 1;
}
<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox1"/>
  <input type="text" name="txtbox2" class="clstxtbox1" />
  <input type="text" name="txtbox2" class="clstxtbox1" />
</div>
<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox2" />
  <input type="text" name="txtbox2" class="clstxtbox2" />
</div>

Here is another variant:

HTML:

<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox1"/>
  </div>
  ...
  ...
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
</div>

CSS:

.input-holder {
  display: flex;
}

.input-holder div {
  flex-grow: 1;
}

.input-holder div input {
  display: block;
  width: 100%;
}

.input-holder {
  margin-bottom: 10px;
  display: flex;
}

.input-holder div {
  padding: 5px;
  flex-grow: 1;
}

.input-holder div input {
  display: block;
  width: 100%;
}
<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox1"/>
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
</div>
<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox2" />
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox2" />
  </div>
</div>