CODEWITHSUNDEEP
htmlcss
Ragen Dazs
Ragen Dazs

Reputation: 2170

CSS div gap between elements

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

Upvotes: 0

Views: 175

Answers (5)

Cl&#225;udio Marinho
Cl&#225;udio Marinho

Reputation: 11

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;
}

Upvotes: 1

enguerranws
enguerranws

Reputation: 8233

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/

Upvotes: 2

Sten Pelzer
Sten Pelzer

Reputation: 512

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.

Upvotes: 0

kennySystemExit
kennySystemExit

Reputation: 329

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

Upvotes: 0

sinanspd
sinanspd

Reputation: 2734

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

Upvotes: 0

Related Questions