Put spacing between divs in a horizontal row

Question

I have 4 divs in a horizontal row  I want to put space between the divs  using margin  I guess    but the divs overflow their parent container when I do that   With zero margin  they line up nicely on one line    x000D   x000D   lt div style  width 100   height  200px  background-color  grey   gt  x000D     lt div style  width  25   float left  margin  0px  background-color  red   gt A lt  div gt  x000D     lt div style  width  25   float left  margin  0px  background-color  orange   gt B lt  div gt  x000D     lt div style  width  25   float left  margin  0px  background-color  green   gt C lt  div gt  x000D     lt div style  width  25   float left  margin  0px  background-color  blue   gt D lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Now when I introduce a margin of 5px  the last button wraps    x000D   x000D   lt div style  width 100   height  200px  background-color  grey   gt  x000D     lt div style  width  25   float left  margin  5px  background-color  red   gt A lt  div gt  x000D     lt div style  width  25   float left  margin  5px  background-color  orange   gt B lt  div gt  x000D     lt div style  width  25   float left  margin  5px  background-color  green   gt C lt  div gt  x000D     lt div style  width  25   float left  margin  5px  background-color  blue   gt D lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I guess this is because the width attribute  when a percentage  doesn t take the margin into account for the element s total width  What s the right way to do this   Thanks

User · Answer

You can set left margins for li tags in percents and set the same negative left margin on parent    x000D   x000D  ul  margin-left -5    x000D  li  width 20  margin-left 5  float left   x000D   lt ul gt  x000D     lt li gt A x000D     lt li gt B x000D     lt li gt C x000D     lt li gt D x000D   lt  ul gt  x000D   x000D   x000D    http   jsfiddle net UZHbS

User · Answer

This is because width when provided a   doesn t account for padding margins   You will need to reduce the amount to possibly 24  or 24 5    Once this is done you should be good  but you will need to provide different options based on the screen size if you want this to always work correct since you have a hardcoded margin  but a relative size

User · Answer

A possible idea would be to    delete the width  25   float left  from the style of your divs wrap each of the four colored divs in a div that has style  width  25   float left     The advantage with this approach is that all four columns will have equal width and the gap between them will always be 5px   2   Here s what it looks like    x000D   x000D   cellContainer   x000D    width  25   x000D    float  left  x000D    x000D   lt div style  width 100   height  200px  background-color  grey   gt  x000D     lt div class  cellContainer  gt  x000D       lt div style  margin  5px  background-color  red   gt A lt  div gt  x000D     lt  div gt  x000D     lt div class  cellContainer  gt  x000D       lt div style  margin  5px  background-color  orange   gt B lt  div gt  x000D     lt  div gt  x000D     lt div class  cellContainer  gt  x000D       lt div style  margin  5px  background-color  green   gt C lt  div gt  x000D     lt  div gt  x000D     lt div class  cellContainer  gt  x000D       lt div style  margin  5px  background-color  blue   gt D lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Put all the divs in a individual table cells and set the table style to padding  5px    E g    x000D   x000D   lt table style  width  100   padding  5px   gt  x000D   lt tbody gt  x000D   lt tr gt  x000D   lt td gt  x000D   lt div style  background-color  red   gt A lt  div gt  x000D   lt  td gt  x000D   lt td gt  x000D   lt div style  background-color  orange   gt B lt  div gt  x000D   lt  td gt  x000D   lt td gt  x000D   lt div style  background-color  green   gt C lt  div gt  x000D   lt  td gt  x000D   lt td gt  x000D   lt div style  background-color  blue   gt D lt  div gt  x000D   lt  td gt  x000D   lt  tr gt  x000D   lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Another idea  Compensate for your margin on the opposite side of the div    For the side with the spacing you are looking to achieve as an example  10px  and for the opposing side  compensate with a -10px  It works for me  This likely won t work in all scenarios  but depending on your layout and spacing of other elements  it might work great

User · Answer

I would suggest making the divs a little smaller and adding a margin of a percentage    x000D   x000D   lt div style  width 100   height  200px  background-color  grey   gt  x000D     lt div style  width  23   float left  margin  1   background-color  red   gt A lt  div gt  x000D     lt div style  width  23   float left  margin  1   background-color  orange   gt B lt  div gt  x000D     lt div style  width  23   float left  margin  1   background-color  green   gt C lt  div gt  x000D     lt div style  width  23   float left  margin  1   background-color  blue   gt D lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net YJT7q

User · Answer

Quite a few ways to apprach this problem   Use the box-sizing css3 property and simulate the margins with borders   http   jsfiddle net Z7mFr 1   div inside    width  25    float left   border-right  5px solid grey   background-color  blue   box-sizing border-box   -moz-box-sizing border-box     Firefox     -webkit-box-sizing border-box     Safari        lt div style  width 100   height  200px  background-color  grey   gt    lt div class  inside  gt A lt  div gt    lt div class  inside  gt B lt  div gt    lt div class  inside  gt C lt  div gt    lt div class  inside  gt D lt  div gt   lt  div gt    Reduce the percentage of your elements widths and add some margin-right   http   jsfiddle net mJfz3    outer    width 100    background  999   overflow auto      inside    float left   width 24    margin-right 1    background  333

[html] Put spacing between divs in a horizontal row?

Examples related to html

Examples related to css