0

i am fairly new to coding in terms of webpage structure. i have two forms here that list some items. in its current state it the forms go down the page in a long line what. i would like to have the forms be next to each other. 

<form name="meats">
<h2>Select one Protien</h2>
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg">
</p>

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg">
</p>

<p><input type="checkbox" name="meat" value="lamb" />
Roast Lamb: <br /><img src="lamb.jpg">
</p>

<p><input type="checkbox" name="meat" value="Steak" />
Grilled Steak: <br /><img src="steak.jpg">
</p>

<p><input type="checkbox" name="meat" value="tofu" />
Marinated Tofu: <br /><img src="tofu.jpg">
</p>

i tested using style="margin-right:5em" but it only shifted the form over to the right and did not bring it up next to the other form.

<form style="margin-left:20em" name="vegetables">
<h2>Select your vegetables</h2>

<p><input type="checkbox" name="veg" value="broco" />
Broccoli: <br /><img src="brocc.jpg">
</p>

<p><input type="checkbox" name="veg" value="Aspar" />
Asparagus: <br /><img src="aspar.jpg">
</p>

<p><input type="checkbox" name="veg" value="sprouts" />
Brussel Sprouts: <br /><img src="sprouts.jpg">
</p>

<p><input type="checkbox" name="veg" value="redBell" />
Red Bell Pepper: <br /><img src="redbell.jpg">
</p>

<p><input type="checkbox" name="veg" value="eggP" />
Eggplant:  <br /><img src="eggp.jpg">
</p>

Nick Kaser
  • 21
  • 1
  • 1
    Place these forms in two divs and make them appear next to each other. http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other – Sameer Naik Jul 25 '16 at 01:46
  • 1
    Are you at all familiar with CSS? If so, I would defer to CSS rather than use inline styles. It will keep your code cleaner and give you more options than inline styles. – ben.kaminski Jul 25 '16 at 01:51

2 Answers2

1

wrap each form in a div than float them and give the width of 50%;

favorite i am fairly new to coding in terms of webpage structure. i have two forms here that list some items. in its current state it the forms go down the page in a long line what. i would like to have the forms be next to each other.

<div style="width:48%;float:left;margin-right:2%">
<form name="meats">
<h2>Select one Protien</h2>
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg">
</p>

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg">
</p>

<p><input type="checkbox" name="meat" value="lamb" />
Roast Lamb: <br /><img src="lamb.jpg">
</p>

<p><input type="checkbox" name="meat" value="Steak" />
Grilled Steak: <br /><img src="steak.jpg">
</p>

<p><input type="checkbox" name="meat" value="tofu" />
Marinated Tofu: <br /><img src="tofu.jpg">
</p>

</form>
</div>


<div style="width:48%;float:left;">
<form style="margin-left:20em" name="vegetables">
<h2>Select your vegetables</h2>

<p><input type="checkbox" name="veg" value="broco" />
Broccoli: <br /><img src="brocc.jpg">
</p>

<p><input type="checkbox" name="veg" value="Aspar" />
Asparagus: <br /><img src="aspar.jpg">
</p>

<p><input type="checkbox" name="veg" value="sprouts" />
Brussel Sprouts: <br /><img src="sprouts.jpg">
</p>

<p><input type="checkbox" name="veg" value="redBell" />
Red Bell Pepper: <br /><img src="redbell.jpg">
</p>

<p><input type="checkbox" name="veg" value="eggP" />
Eggplant:  <br /><img src="eggp.jpg">
</p>

</form>

</div>
Daniel
  • 815
  • 1
  • 6
  • 13
0

Hi check if it's ok...

<div style="width:50%;float:left;"><form name="meats">
<h2>Select one Protien</h2>
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg">
</p>

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg">
</p>

<p><input type="checkbox" name="meat" value="lamb" />
Roast Lamb: <br /><img src="lamb.jpg">
</p>

<p><input type="checkbox" name="meat" value="Steak" />
Grilled Steak: <br /><img src="steak.jpg">
</p>

<p><input type="checkbox" name="meat" value="tofu" />
Marinated Tofu: <br /><img src="tofu.jpg">
</p>
</form>
</div>
<div style="width:50%;float:left;" >
<form style="margin-left:20em" name="vegetables">
<h2>Select your vegetables</h2>

<p><input type="checkbox" name="veg" value="broco" />
Broccoli: <br /><img src="brocc.jpg">
</p>

<p><input type="checkbox" name="veg" value="Aspar" />
Asparagus: <br /><img src="aspar.jpg">
</p>

<p><input type="checkbox" name="veg" value="sprouts" />
Brussel Sprouts: <br /><img src="sprouts.jpg">
</p>

<p><input type="checkbox" name="veg" value="redBell" />
Red Bell Pepper: <br /><img src="redbell.jpg">
</p>

<p><input type="checkbox" name="veg" value="eggP" />
Eggplant:  <br /><img src="eggp.jpg">
</p>
</form>
  </div>

cheers!!

Daebak
  • 409
  • 2
  • 9