set space between html5 elements

Question

I am trying to create a simple html file with 2 column like structure. I managed it but there is no space between each element as you can see in the JSFiddled demo. I tried margin and padding but failed. How can I put some space between input elements for example?

JSFiddle

And here is my css:

    .left
    {
    position:relative;
    left:10px;      
    }

    .right
    {
    position:fixed;
    left:300px;   
    }

score 1 · Accepted Answer · answered Aug 20 '13 at 17:32

1

You could also use p elements to surround your label-field matches instead of using br line breaks, and would still be valid HTML.

For example:

<p>
    <label for="foo">Foo:</label>
    <textarea id="foo"></textarea>
</p>

Here's a fiddle.

answered Aug 20 '13 at 17:32

federico-t

12,014
19
67
111

1

Although this answer is valid, I would like to remind people that you should not fix all your problems using the `p` tag, as [some tags will just break the `p` tag](http://stackoverflow.com/a/17319496/1451422). – Jeff Noel Aug 20 '13 at 17:35
@JeffNoel Interesting, I did have some problems with the `p` tag in the past. Most modern browsers overlook it though. – federico-t Aug 20 '13 at 17:46

rink.attendant.6 · Answer 2 · 2013-08-20T17:45:37.507

0

Try this using inline-block for this type of thing:

.left {
    display: inline-block;
    width: 300px;
    margin-left: 0.6em;
}
label, input, select {
    margin: 0.5em 0;
}

edited Aug 20 '13 at 17:45

answered Aug 20 '13 at 17:26

rink.attendant.6

44,500
61
101
156

Thank you for the answer but buttons on the left widened this way. – ahmet aydin Aug 20 '13 at 19:47

score 0 · Answer 3 · answered Aug 20 '13 at 17:32

0

Try this, but why are you using relative label and fix position for inputs?

.left {
    display: inline-block;
    left: 10px;
    margin-bottom: 10px;
    position: relative;
}

answered Aug 20 '13 at 17:32

Michal Voják

74
4

Actually I wanted to achieve that view where labels on the left input elements on the right where they are on the same line. I didnt know any other way to get that view. – ahmet aydin Aug 20 '13 at 19:40

score 0 · Answer 4 · answered Aug 20 '13 at 17:33

0

.left { position:relative; left:10px; width:300px; float:left; display:block; }

    .right
    {
        position:relative;
        left:0px;
        display:block;
    }

This works fine with your jsfiddle. Tested it there. Add further margins if you need. The display:block does the trick

answered Aug 20 '13 at 17:33

mvinayakam

2,808
2
18
20

Thank you for the answer but buttons on the left widens this way.@MichalVoják s answer is better for me. – ahmet aydin Aug 20 '13 at 19:46

set space between html5 elements

4 Answers4