CSS div gap between elements

Problem

I found too many references about this subject already answered, but I didn't found one satisfactory answered.

Follow de case:

enter image description here

I have created a minimalist fiddle with expected behavior:

enter image description here

@ See fidlle

If a have 3 cels I wish spacer only between each div. This is possible using only CSS?

[HTML]

<div class="cel-1-2">
   Max Size of Objects in Cache (Shared Memory)
    <div class="cel-1-2">
        <input type="text" placeholder="foo" />
    </div>
    <div class="cel-1-2">
        <select>
            <option value="foo">bar</option>
        </select>
    </div>
</div>
<div class="cel-1-2">
    foobar
</div>

[CSS]

[class*=cel-] {
   padding-right:10px;
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;     
   box-sizing: border-box;
    background: blue;
}

.cel-1-2 {
    width: 50%;
    float: left;
}

input, select {
    width: 100%;
    float: left;
}

Been more clear:

This is what I want

enter image description here

==>NOT this!

enter image description here

Problem courtesy of: Ragen Dazs

Solution

I don't know what is the issue here. That can be easily done with CSS :

.parent {
   width: 100%;
   background: green;
    padding: 1em 0; 
    height: 500px;
}
.child {
    width: 30%;
    height: 200px;
    background: yellow;
    float: left;
}
.child + .child {
    margin-left: 5% /* 1 000 000 $ TIP */
}

Live demo : http://jsfiddle.net/hDqbk/

Solution courtesy of: enguerranws

Discussion

I strongly recommend you to use twitter bootstrap to build your site. It is simple, it is strong, it is responsive. I tried to use it to your code like this:

<html>
    <head>
        <title>Student Program Management</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <p>Max Size of Objects in Cache (Shared Memory)</p>
                <div class="col-md-4 ">
                    <input type="text" placeholder="foo" />
                </div>
                <div class="col-md-4">
                    <select>
                        <option value="foo">bar</option>
                    </select>
                </div>
                <div class="col-md-4">
                    foobar
                </div>
            </div>
        </div>
    </body>
</html>

But yes, there is also other ways to use simple css, but in many cases it is much more painful then this approach. Bootstrap is based on Grid Layout system, where your site is decided to as many rows (attribute class = "row" in div element) as you wish. Then inside a row, you can put columns (div with attribudte class="col-md-4" - for example). One row has 12 columns, so in my case, there are 3 rows in one column, so every div has class="col-md-4" becouse 12/3=4. Every div has now same width. I am not sure, if this is exactly what you want, but aim to frameworks like bootstrap is much more effective then use simple CSS, so I can only recommend you to ged rid of plain CSS if it is possible. You can find more here: http://getbootstrap.com/css/#grid

Discussion courtesy of: kennySystemExit

I am new to web design but If I did not get your question wrong I can recommend these: 1) Use bootstrap to place those divs on the same line, bootstrap will create the spacing automatically.

2) Manually moving divs using margin property which I don't recommend

P.S.: I was going to comment to ask for a little bit clarification but I do not have enough rep yet. If this is irrelevant please ignore and I will try to come up with a relevant answer

Discussion courtesy of: sinanspd

give the middle div a new class, and give that class the right properties.

for example:

.TheFloatingDiv{
    margin-left: 10px;
    margin-right: 10px;
}

Hope this is the answer to your question, as i didn't understand it completely.

Discussion courtesy of: Sten Pelzer

I think you can set a margin-left to all child and then reset the first.
http://jsfiddle.net/r66BG/3/

.child {    
    float: left;
    margin-left: 20px;
}

.child:first-child {
    margin-left: 0px;
}
Discussion courtesy of: Cláudio Marinho

This recipe can be found in it's original form on Stack Over Flow.