space between divs - display table-cell

Question

I have here two divs    lt div style  display table-cell  id  div1  gt      content  lt  div gt    lt div style  display table-cell  id  div2  gt      content  lt  div gt    Is there a way to make space between these two divs  that have display table-cell

User · Answer

Make a new div with whatever name  I will just use table-split  and give it a width  without adding content to it  while placing it between necessary divs that need to be separated   You can add whatever width you find necessary  I just used 0 6  because it s what I needed for when I had to do this     x000D   x000D   table-split   x000D    display  table-cell  x000D    width  0 6  x000D    x000D   lt div class  table-split  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Well  the above does work  here is my solution that requires a little less markup and is more flexible    x000D   x000D   cells   x000D    display  inline-block  x000D    float  left  x000D    padding  1px  x000D    x000D   cells gt  content   x000D    background   EEE  x000D    display  table-cell  x000D    float  left  x000D    padding  3px  x000D    vertical-align  middle  x000D    x000D   lt div id  div1  class  cells  gt  lt div class  content  gt My Cell 1 lt  div gt  lt  div gt  x000D   lt div id  div2  class  cells  gt  lt div class  content  gt My Cell 2 lt  div gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use border-spacing property   HTML    lt div class  table  gt       lt div class  row  gt           lt div class  cell  gt Cell 1 lt  div gt           lt div class  cell  gt Cell 2 lt  div gt       lt  div gt   lt  div gt    CSS    table     display  table    border-collapse  separate    border-spacing  10px      row   display table-row      cell     display table-cell    padding 5px    background-color  gold      JSBin Demo  Any other option   Well  not really   Why    margin property is not applicable to display  table-cell elements  padding property doesn t create space between edges of the cells  float property destroys the expected behavior of table-cell elements which are able to be as tall as their parent element

User · Answer

Use transparent borders if possible   JSFiddle Demo  https   jsfiddle net 74q3na62   HTML   lt div class  table  gt       lt div class  row  gt           lt div class  cell  gt Cell 1 lt  div gt           lt div class  cell  gt Cell 2 lt  div gt           lt div class  cell  gt Cell 3 lt  div gt       lt  div gt   lt  div gt    CSS   table     display  table    border  1px solid black      row   display table-row      cell     display  table-cell    background-clip  padding-box    background-color  gold    border-right  10px solid transparent      cell last-child     border-right  0 none      Explanation  You could use the border-spacing property  as the accepted answer suggests  but this not only generates space between the table cells but also between the table cells and the table container  This may be unwanted   If you don t need visible borders on your table cells you should therefore use transparent borders to generate cell margins  Transparent borders require setting background-clip  padding-box  because otherwise the background color of the table cells is displayed on the border   Transparent borders and background-clip are supported in IE9 upwards  and all other modern browsers   If you need IE8 compatibility or don t need actual transparent space you can simply set a white border color and leave the background-clip out

User · Answer

lt div style  display table width 100     gt   lt div style  display table-cell width 49   id  div1  gt  content  lt  div gt    lt  -- space between divs - display table-cell -- gt   lt div style  display table-cell width 1   id  separated  gt  lt  div gt   lt  --   space between divs - display table-cell -- gt    lt div style  display table-cell width 50   id  div2  gt  content  lt  div gt   lt  div gt

[html] space between divs - display table-cell

Examples related to html

Examples related to css

Examples related to css-tables