WebDev

SMF Modifications => General Code/Script Inquiries => Topic started by: Ronald on February 06, 2021, 12:48:06 PM

Title: 2 HTML code boxes "side by side"
Post by: Ronald on February 06, 2021, 12:48:06 PM
<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
Title: Re: 2 HTML code boxes "side by side"
Post by: Chen Zhen on February 07, 2021, 03:50:04 PM

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>
Title: Re: 2 HTML code boxes "side by side"
Post by: Ronald on February 07, 2021, 06:36:40 PM
Thanks Chen, works great.
EhPortal 1.39.6 © 2024, WebDev