user3448595 user3448595 - 1 year ago 84
CSS Question

Positioning 2 divs next to eachother

iI'm a beginner thats why i couldn't find the answer because I don't have any idea what I need to use for the search terms.

Now I have a form

<form action="#" method="POST">
<div id="labels">
<label>CMS Systeem</label><p>
<label>Responsive Design</label><p>
<label>Google Pakket+</label><p>
<label>Google Ranking</label><p>
<label>Social Media</label><p>

<div id="input">
<input type="text" name="pagina" value="1"><p>
Ja<input type="radio" name="cms" id="cmsja" value="ja"/> Nee<input type="radio" name="cms" value="nee" id="cmsnee" checked/><p />
Ja<input type="radio" name="Responsive" value="ja"/> Nee<input type="radio" name="Responsive" value="nee" checked/><p />
Ja<input type="radio" name="Googlep" value="ja"/> Nee<input type="radio" name="Googlep" value="nee" checked/><p />
Ja<input type="radio" name="Googletop" value="ja"/> Nee<input type="radio" name="Googletop" value="nee" checked/><p />
Ja<input type="radio" name="slider" value="ja" /> Nee<input type="radio" name="slider" value="nee" checked/><p />
Ja<input type="radio" name="socials" value="ja" id="mediaja" /> Nee<input type="radio" name="socials" value="nee" id="medianee" checked/><p />

I want

#input {
next to #labels instead of under #input


I had it fixed with
margin: -xxxpx;
but I have a idea that's not the good way to do that.


Answer Source

Couple things:

Your <div id="labels" > needed a </div> closing tag.

Also, <p> tags need an open and closing tag, like this <p></p>

And you need to be consistent in EVERY element getting a <p> tag if that's how you're hoping to line them up. Ideally, you would want the mark-up to be like this:

<label>CMS System</label><input type="radio" name="cms" />

So they would be side by side in HTML and visually. If you need them in 2 separate <div> containers, though, try this :

There seems to be a discrepancy between them, so either add an extra <p> in the first or second <div> container so you get what I believe you are looking for.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download