As a beginner, I'm struggling to find the answer because I have no idea what search terms to use.
Now, I have a form
<form action="#" method="POST">
<div id="labels">
<label>CMS System</label><p>
<label>Responsive Design</label><p>
<label>Google Package+</label><p>
<label>Google Ranking</label><p>
<label>Slider/Slideshow</label><p>
<label>Social Media</label><p>
<div id="input">
<input type="text" name="page" value="1"><p>
Yes<input type="radio" name="cms" id="cmsyes" value="yes"/> No<input type="radio" name="cms" value="no" id="cmsno" checked/><p />
Yes<input type="radio" name="Responsive" value="yes"/> No<input type="radio" name="Responsive" value="no" checked/><p />
Yes<input type="radio" name="Googlepkg" value="yes"/> No<input type="radio" name="Googlepkg" value="no" checked/><p />
Yes<input type="radio" name="Googlerank" value="yes"/> No<input type="radio" name="Googlerank" value="no" checked/><p />
Yes<input type="radio" name="slideshow" value="yes" /> No<input type="radio" name="slideshow" value="no" checked/><p />
Yes<input type="radio" name="socials" value="yes" id="socialyes" /> No<input type="radio" name="socials" value="no" id="socialno" checked/><p />
</div>
</form>
I would like
#input {
move next to #labels instead of being below it
}
I tried using margin: -xxxpx; but I understand that is not the correct way to achieve this.
JSFiddle http://jsfiddle.net/tAVGC/