CODEWITHSUNDEEP
htmlcss
user596075
user596075

Reputation:

Nested Divs Spacing

I have a parent div and two nested divs. I have the nested divs set as display: table-cell. How can you set spacing between those nested divs? I've tried margin, but that didn't do anything (the jsFiddle has margin set, yet with no effect).

jsFiddle showing my question/problem

Upvotes: 0

Views: 2466

Answers (4)

Starx
Starx

Reputation: 78991

It is possible and very simple

Since you have specified the child divs to behave as table-cell, by default they will be no spacing between them just like a regular table. So, there is nothing wrong with you code.

If you really want your divs to behave as tables. Your parent div should have border-spacing for the spacing between the table-cells.

.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    border-spacing: 10px;
}

Demo

Upvotes: 0

Mayhem50
Mayhem50

Reputation: 431

This should fix you’re issue. I assume your looking to get a checkerboard effect?

.child {
      float:left;
      width: 100px;
      height: 100px;
      display: inline-block;
      margin-left: 100px;
    }

Upvotes: 2

Patch
Patch

Reputation: 2507

Instead of display: table-cell, try this:

.child {
    width: 100px;
    height: 100px;
    float:left;
    margin-left: 100px;
}

Upvotes: 0

sandeep
sandeep

Reputation: 92793

Give display: inline-table; instead of display: table-cell. Write like this 

.child {
    width: 100px;
    height: 100px;
    display: inline-table;
    margin-left: 100px;
}

Check this http://jsfiddle.net/cZptA/9/

Upvotes: 2

Related Questions