Positioning input form and picture side by side

Hello,
I have been trying to put picture and input form side by side but been unable. how can i do it?
It looks like this right now:


The code is beow:
html:

<div class="pageDiv" id="page5">
  <h2>Voltage Divider Biased BJT Amplifier Calculator</h2>
  <div class="calcContainer">
    <form autocomplete="off" id="vdbForm">
      <table>
        <tr>
          <td width="30%">
      <div class="calcFormContainer">
		
			<b>Inputs</b>:               
      			<br />
				<label>f:</label><input autocomplete="off" id="vdbfId" size="5" type="text" />
                                  <select id="vdbfreqSelectId">
                                      <option value="hz">Hz</option>
                                      <option selected="" value="khz">KHz</option>
                                      <option value="mhz">MHz</option>
				</select><br />
          		<label>β:</label><input id="vdbbetaId" size="5" type="text" /><br />
                <label>V<sub>BE</sub>:</label><input id="vdbVbeId" size="5" type="text" /> V <br />
                <label>V<sub>CC</sub>:</label><input id="vdbVccId" size="5" type="text" /> V <br />
                <label>V<sub>C</sub>:</label><input id="vdbVcId" size="5" type="text" /> V <br />
                <label>I<sub>C</sub>:</label><input id="vdbIcId" size="5" type="text" /> mA <br />
                <label>V<sub>E</sub>:</label><input id="vdbVeId" size="5" type="text" /> V <br />
                <label>R<sub>2</sub>:</label><input id="vdbR2Id" size="5" type="text" />   
                                    <select id="vdbR2Select">
                                    <option value="ohm">Ω</option>
                                    <option selected="" value="kohm">KΩ</option>
                                    </select> <br />
				<label>R<sub>L</sub>:</label><input id="vdbRLId" size="5" type="text" />   
                                    <select id="vdbRLSelectId">
                                    <option value="ohm">Ω</option>
                                    <option selected="" value="kohm">KΩ</option>
                                    </select> <br />
               	<br />
                            <input type="reset" value="Reset" />
                            <input onclick="vdbAmpCalc()" type="button" value="Calculate" />
					<br />
       
     
      </div>
          </td>
		   <td width="70%">
      <div class="calcImgcontainer">
                          <img alt="Voltage Divider Biased BJT amplifier Circuit Diagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh16O0_TRIjhfmnajqE_guNUepsOrFGSbCR4pK3XV9XCuUDd-tZi6_uiGk5Ri15YFCQgwH3rrr2_OAZUIePBvS-1pzw9p1-g7wYPJKhybZvA0z9T_57-6vpjuRJHGoFWdsdv2I4qIRAABFfAzWJpNREN9dMV4LsTk7lSqQfZqtChDeQidwXwiMyu94iMA/s1600/vdbbias.png" />
      </div>
          </td>
        </tr>
      <div class="calcResults">                                
   <b>Theoritical Results:</b>
                                
                            <table>
                                <tbody>
                                  <tr>
                                    <td><label>R<sub>1</sub>:</label><input id="vdbR1Ans" readonly="" size="10" type="text" /></td>
                                    <td><label>R<sub>C</sub>:</label><input id="vdbRcAns" readonly="" size="10" type="text" /></td>     
                                    <td><label>R<sub>E</sub>:</label><input id="vdbReAns" readonly="" size="10" type="text" /></td> 
                                    <td><label>r<sub>ace</sub>:</label><input id="vdbraceAns" readonly="" size="10" type="text" /></td>  
                                    <td><label>Z<sub>inb</sub>:</label><input id="vdbZinbAns" readonly="" size="10" type="text" /></td>  
                                    <td><label>Z<sub>in</sub>:</label><input id="vdbZinAns" readonly="" size="10" type="text" /></td>       
                                   </tr>
                                   <tr>
                                    <td><label>r<sub>c</sub>:</label><input id="vdbrcAns" readonly="" size="10" type="text" /></td>
                                    <td><label>C<sub>1</sub>:</label><input id="vdbC1Ans" readonly="" size="10" type="text" /></td>    
                                    <td><label>C<sub>2</sub>:</label><input id="vdbC2Ans" readonly="" size="10" type="text" /></td>
                                    <td><label>C<sub>3</sub>:</label><input id="vdbC3Ans" readonly="" size="10" type="text" /></td>   
                                    <td><label>A<sub>v</sub>:</label><input id="vdbAvAns" readonly="" size="10" type="text" /></td>              
                                   </tr>
                             	</tbody>
                             </table>
          </div>
      </table>

    </form>
  </div>
</div>

CSS:

<style>
      
  .menuDiv{
      position:relative;
      margin: auto;
  }
        
  .pageDiv{
      display: none;
      position:relative;
      margin: auto;
      padding: 10px 0px;
      width:100%;
      height:100%;
  }

  table{
  background-color:white;
  border:none;
  border-collapse: collapse;
  }


          /* Style inputs */
  input[type=text],input[type="number"]{
  padding: 1px 2px;
  border-radius: 4px;
  box-sizing: border-box;
  }

  /* Style the submit button */
  input[type=button],input[type = reset]{
  background-color: #2B0808;
  color: white;
  padding: 3px 7px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  }

  /* Add a background color to the submit button on mouse-over */
  input[type=submit]:hover {
  background-color: #ad8585;
  } 
  
  .button1 {
  background-color: #4CAF50;
  border-radius: 8px;
  border: 2px solid black;
  } /* Green */
.button2 {
  background-color: #008CBA;
  border-radius: 8px;
  border: 2px solid black;
  } /* Blue */
.button3 {
  background-color: #f44336;
  border-radius: 8px;
  border: 2px solid black;
  } /* Red */
.button4 {
  background-color: #e7e7e7; color: black;
  border-radius: 8px;
  border: 2px solid black;
  } /* Gray */
.button5 {
  background-color: #555555;
  border-radius: 8px;
  border: 2px solid black;
  } /* Black */
.button6 {
  background-color: #FFFF00;
  border-radius: 8px;
  border: 2px solid black;
  } /* Yellow */
  
  
  .calcContainer{
     Display: flex;
}    
      
.calcFormContainer1{
     Display: flex;
     width:30%
 }

.calcImgContainer{
       Display: flex;
    width: 70%;
}
  
.calcFormContainer2{
Display: flex;
     width:50%
 }

</style>

First thing, you should not be using the table element for layout like this. A table is for displaying tabular data.
Use CSS to adjust the layout to what you want. If you want the content to appear like a table, you may use display-table and associated properties.
Secondly, the HTML you have written isn’t valid. Until you have it pass a validation test, you probably won’t be able to properly predict or control how it looks.

2 Likes