CODEWITHSUNDEEP
htmlcss
user3448595
user3448595

Reputation: 7

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>Slider/Diavoorstelling</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 />
            </div>
    </form>

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.

JSFiddle http://jsfiddle.net/tAVGC/

Upvotes: 0

Views: 89

Answers (5)

Dimitrios Kontoulis
Dimitrios Kontoulis

Reputation: 420

More elegant with less markup 

label{
display:inline-block;
width:150px;
}

http://jsfiddle.net/tAVGC/10/

Upvotes: 0

Harvey A. Ramer
Harvey A. Ramer

Reputation: 772

For form elements, this sort of thing can work well:

HTML:

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

CSS:

label, input[type=text] { display:inline-block; text-align: right; }
label { width: 30%; margin-right: 2%; }
input, input[type=text] { width: 60%; }

The radio inputs don't need a width, but I threw in the text input to show how you might flesh this out for forms.

See example here: http://jsfiddle.net/harveyramer/E7kSt/

Upvotes: 0

Stijn de Witt
Stijn de Witt

Reputation: 42055

It looks like you are trying to make some kind of CMS?

First of all, to learn how to position elements with CSS, I would do some searches for the terms css box model. That should yield some good results explaining how to place elemenst next to each other.

Now to your problem at hand. I am guessing you want something like this: JSFiddle

You first placed all the labels in the markup and then all the controls (radio buttons), but the key here is to group them together: label and control for each question:

<label>CMS Systeem</label>
Ja<input type="radio" name="cms" id="cmsja" value="ja"/> 
Nee<input type="radio" name="cms" value="nee" id="cmsnee" checked="checked" />
<br/>

I used a <br/> element here which is a bit quick and dirty. The aforementioned box model will give you much better control over positioning.

I also think that you should search for things like html forms

Lastly, as a beginner, a CMS might be a bit ambitious. Why not start out smaller?

Upvotes: 0

calvin
calvin

Reputation: 479

http://jsfiddle.net/BURR2/

#labels { float: left; margin-right: 10px; }

Also, close your tags.

As a side note about styling with ids, I'd recommend using classes instead. This article by Chris Coyier is a good one, and links some other good resources.

Upvotes: 2

RCNeil
RCNeil

Reputation: 8759

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 :

http://jsfiddle.net/sk6gz/1/

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.

Upvotes: 1

Related Questions