CODEWITHSUNDEEP
htmlcss
Felipe Moreira
Felipe Moreira

Reputation: 81

CSS positioning - How to put one input next to another

I want to put the input "Favored CPF" on the right side of "Favored". How can I do this?

Here is an example: enter image description here 

<table border="0" style="float: right; margin-right: 100px;" cellpadding="2" cellspacing="0">
  <tr>
    <td><label for="favorecido">Favorecido:</label></td>
    <td><input type="text" name="favorecido" id="favorecido" value="<?=$queryFornecedor->fields['favorecido'];?>" size="50" maxlength="100" /></td>
  </tr>
  <tr>
    <td><label for="favorecido_cpf">Favorecido CPF:</label></td>
    <td><input type="text" name="favorecido_cpf" id="favorecido_cpf" value="<?=$queryFornecedor->fields['favorecido_cpf'];?>" size="50" maxlength="100" /></td>
  </tr>
</table>

Upvotes: 2

Views: 721

Answers (3)

Leo Policastro
Leo Policastro

Reputation: 1142

Either take the two inputs out of the table or put the two inputs in the same row of the table.



<!-- First Solution -->
      <div style="display:flex;">

        <input type="text" name="favorecido" id="favorecido" value="<?=$queryFornecedor->fields['favorecido'];?>" size="50" maxlength="100" />
        <input type="text" name="favorecido_cpf" id="favorecido_cpf" value="<?=$queryFornecedor->fields['favorecido_cpf'];?>" size="50" maxlength="100" />


        </div>

        <!-- Second Solution -->

        <table border="0" style="float: right; margin-right: 100px;" cellpadding="2" cellspacing="0">

         <tr>
           <td><label for="favorecido">Favorecido:</label></td>
           <td><input type="text" name="favorecido" id="favorecido" value="<?=$queryFornecedor->fields['favorecido'];?>" size="50" maxlength="100" /></td>

           <td><label for="favorecido_cpf">Favorecido CPF:</label></td>
           <td><input type="text" name="favorecido_cpf" id="favorecido_cpf" value="<?=$queryFornecedor->fields['favorecido_cpf'];?>" size="50" maxlength="100" /></td>

         </tr>
     </table>

Upvotes: 0

epascarello
epascarello

Reputation: 207511

Make little sense to use a table for a layout. You would be better off changing the structure of the code. If you are really stuck with it, you can alter the display of the rows so they no longer act like rows.

tr { display: inline-block }
td { border: 1px solid black; }
<table>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
  </tr>     
  <tr>
    <td>2-1</td>
    <td>2-2</td>
  </tr>     
</table>

Upvotes: 1

JamesGill
JamesGill

Reputation: 323

To perform this simply using the table structure you have used you can just put them in the same <tr></tr/,

<table border="0" style="float: right; margin-right: 100px;" cellpadding="2" cellspacing="0">
  <tr>
    <td><label for="favorecido">Favorecido:</label></td>
    <td><input type="text" name="favorecido" id="favorecido" value="<?=$queryFornecedor->fields['favorecido'];?>" size="50" maxlength="100" /></td>
    <td><label for="favorecido_cpf">Favorecido CPF:</label></td>
    <td><input type="text" name="favorecido_cpf" id="favorecido_cpf" value="<?=$queryFornecedor->fields['favorecido_cpf'];?>" size="50" maxlength="100" /></td>
  </tr>
</table>

As an aside, you may want to look into using css-grid or flex to sort out your alignment.

Upvotes: 3

Related Questions