Add distances between 2
of property display: table-cell

Question

I have 2 <div> which have the styling property display: table-cell. I need to add left and right margin to the <div> and adding margin: 0 10px does not work. And I cannot add padding: 0 10px because the <div> background was set to a color and the <div> have border too. So if I add padding the <div> looks like it keep on expanding. I need to separate the 2 <div> by some pixels. Any ideas?

<body style="background: #555;">

<div style="width: 100px; background: #fff; margin: 0 10px; display: table-cell; border: 1px solid #000">
</div>

<div style="background: #fff; margin: 0 10px; display: table-cell; border: 1px solid #000">
</div>

</body>

Similar question here: http://stackoverflow.com/questions/14227148/how-do-i-add-margin-between-divs-that-are-set-to-display-table-cell — blissini, Jan 18 '14 at 16:47

score 1 · Answer 1 · answered Jan 18 '14 at 16:47

1

Simply add a border.

<div class="tableCell"></div>
<div class="tableCell"></div>

.tableCell {
    background: green;
    border-left: 5px solid white;
    display: table-cell;
    height: 100px;
    width: 50px;
}

Demo

answered Jan 18 '14 at 16:47

MichaB

666
3
8

score 0 · Answer 2 · answered Jan 18 '14 at 16:45

0

If you want to add distance between them. Just change the display property of both div's to inline-block and set the margin property.

div
{
    display: inline-block;
    margin: 0 10px;
}

answered Jan 18 '14 at 16:45

Allan Chua

9,305
9
41
61

Your welcome @CroResistor, you can mark this as the answer if it fixes your problem. – Allan Chua Jan 18 '14 at 16:51
But I come across a new issue. The basic reason why I set `display: table-cell` was 1st `
` has fixed width say 100px. And the right one will automatically take the available width based on screen resolution. Now changing to inline block does not make the 2nd `
` to take the balance width of the window.
– Mr Cathode Jan 18 '14 at 17:33
@CroResistor, just change the display: property of the second div to block. – Allan Chua Jan 18 '14 at 17:49

score 0 · Accepted Answer · answered Jan 18 '14 at 16:45

Add another <div> between your 2 <div>. And add these styling rules to that <div>:

width:10px; // The distance you wish to separate the 2 divs'
display: table-cell;
background: transparent;

This is a simple hack technique. This inserts a transparent <div> between those two and looks like your <div>s are separated by margins.

Add distances between 2 of property display: table-cell

3 Answers3

Add distances between 2
of property display: table-cell