Daily Lucky Numbers:
5
13
24
30
40
42

2 HTML code boxes "side by side"

Started by Ronald, February 06, 2021, 12:48:06 PM

Previous topic - Next topic

Ronald

<form action="//www.html.am/html-codes/textboxes/submitted.cfm">;
<textarea name="myTextBox" cols="50" rows="5" style="border:3px solid #F7730E;">
How do I put this box next to another box of the same size
</textarea>
<br />
</form>

<form action="//www.html.am/html-codes/textboxes/submitted.cfm">;
<textarea name="myTextBox" cols="50" rows="5" style="border:3px solid #F7730E;">
How do I put this box next to another box of the same size
</textarea>
<br />
</form>

2 boxes.png

Chen Zhen


There is also the label tag which can be used but it won't look good for input boxes beside each other.
Instead I suggest using a div table to make labels for this example.

Here is what you requested without any labels:
<div class="centertext">
<form action="//www.html.am/html-codes/textboxes/submitted.cfm">
<div style="display: inline;">
<textarea id="myTextBox1" name="myTextBox1" cols="50" rows="5" style="border:3px solid #F7730E;">
How do I put this box next to another box of the same size?
</textarea>
</div>
<div style="display: inline;padding-left: 0.2em;">
<textarea id="myTextBox2" name="myTextBox2" cols="50" rows="5" style="border:3px solid #F7730E;">
How do I put this box next to another box of the same size?
</textarea>
</div>
</form>
</div>



Here is the same thing but using a div table to give it labels above each textarea:
<div>
<form action="//www.html.am/html-codes/textboxes/submitted.cfm">
<div style="display: table;" class="centertext">
<div style="display: table-row;">
<div style="display: table-cell;">Text area #1:</div>
<div style="display: table-cell;">Text area #2:</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">
<textarea id="myTextBox1" name="myTextBox1" cols="50" rows="5" style="border:3px solid #F7730E;">
How do I put this box next to another box of the same size?
</textarea>
</div>
<div style="display: table-cell;padding-left: 0.2em;">
<textarea id="myTextBox2" name="myTextBox2" cols="50" rows="5" style="border:3px solid #F7730E;">
How do I put this box next to another box of the same size?
</textarea>
</div>
</div>
</div>
</form>
</div>

Ronald