CODEWITHSUNDEEP
htmlcss
serhio
serhio

Reputation: 28586

display: table-cell margins

I have 2 divs as display: table-cell. I need a space between them.

margin-left: 5px for the second div does not work.

I already saw the Why is a div with "display: table-cell;" not affected by margin? answer, but my question is not about how to have a border around a cell, but a LEFT MARGIN (and not padding!) for a concrete cell (the right one)

enter image description here

setting the green div as 

display: table;
border-collapse: separate;
border-spacing: 10px;

makes the space not only between cells, but also all around cells, that is NOK...

How to proceed?

JSFiddle: http://jsfiddle.net/9cw7rhpu/

Upvotes: 3

Views: 15233

Answers (5)

Dzmitry Kulahin
Dzmitry Kulahin

Reputation: 1870

Try this solution:

HTML:

<div class="table">
  <div class="col">
    Column 1
  </div>
  <div class="col">
    Column 2
  </div>
</div>

CSS:

.table {
    display: table;
    border-collapse: separate;
    border-spacing: 25px; 
    width: calc(100% + 50px); 
    margin-left: -25px;
}
.col {
    display: table-cell;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105913

to keep the display:table layout, you may use transparent border and shadow to draw the border:

div.table {
    border:solid;
    border-width:2px;
    border-color: green;
    display: table;
    border-collapse:separate;
    border-spacing:0 5px;
    width: 100%;
    height: 100px;
    margin: 10px;
    background-color: magenta;
}
div.cell {
    border:solid;
    border-width:4px;
    border-color: red;
    display: table-cell;
}
#c1 {
    width: 400px;
    background-color: blue;
    border:0 none;
    background-clip:padding-box;
    border-right:5px solid transparent;
    padding:5px;
    box-shadow:inset  0 0 0 3px red;
}
#c2 {
    width: 200px;
    background-color: magenta;
}
<div class="table">
    <div class="cell" id="c1"></div>
    <div class="cell" id="c2"></div>
</div>

http://jsfiddle.net/jf5zt2xh/4/

Upvotes: 0

Alexander Dayan
Alexander Dayan

Reputation: 2924

Do you mean something like that?

div.table {
    border: solid 2px green;
    display: table;
    border-collapse: separate;
    width: 100%;
    height: 100px;
    margin: 10px;
    background-color: aquamarine;
}
div.cell {
    border: solid 4px red;
    display: table-cell;
}
#c1 {
    width: 400px;
    background-color: blue;
}
#c2 {
    width: 200px;
    background-color: magenta;
}
<div class="table">
    <div class="cell" id="c1"></div>
    <div class="cell" id="c2"></div>
</div>

Upvotes: 1

mmgross
mmgross

Reputation: 3092

If you need your divs to have display:table-cell you'll need to use a workaround so achieve what you're looking for, see "Why is a div with “display: table-cell;” not affected by margin?"

Here's a possible idea to set individual margins for table cells:

div {
  border-style:solid;
  border-width:1px;
}

.table {
  display:table;
  border-color:green;
  width:200px;
}

.cell {
  display:table-cell;
  border-style:none;
  width:50%;
}
.cell > div {
  border-color:red;
  height:100px;
}
#c2 > div {
  margin-left:10px;
}
<div class="table">
  <div id="c1" class="cell">
    <div class="inner"></div>
  </div>
  <div id="c2" class="cell">
    <div class="inner"></div>
  </div>
</div>

The drawback here is that you have to put a second div inside your table-cells (additional markup) and give them a margin and border instead of your table-cells.

You may need to figure out a way to adjust the height of the inner divs, they don't automatically adjust their height to each other.

Of course, if you're not worried about IE < 10, flexbox might be a solution.

Upvotes: 0

kris14an
kris14an

Reputation: 751

Try to use Flexbox (flexbox) to separate child elements

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

Upvotes: 6

Related Questions