How to make a gap between two DIV within the same column

Question

I have two paragraphs  The two paragraphs are located in the same column  Now my question is I need to make the two paragraphs in two separate boxes  down each other  In other words  gap between two boxes coming down each other   HTML Code       lt div class  sidebar  gt                    lt div class  box1  gt                       lt p gt                       Text is here                      lt  p gt                   lt  div gt                    lt div class  box2  gt                       lt p gt                       Text is here                       lt  p gt                   lt  div gt         lt  div gt    My CSS Code is    sidebar       background  red      margin  10px      padding  0 7px 0 7px      width  400px      border-radius  10px      box1       display  block      padding  10px      margin-bottom  30px      text-align  justify      box2       display  block      padding  10px      text-align  justify      Like here

User · Answer

firstDropContainer  float  left   width  40    margin-right  1 5em        secondDropContainer  float  left   width  40   margin-bottom  1em        lt div id  mainDrop  gt       lt div id  firstDropContainer  gt  lt  div gt       lt div id  secondDropContainer  gt  lt  div gt   lt  div gt   Note  Adjust the width of the divs based on your req

User · Answer

you can use  nbsp  for a single space  if you like    just using single allows you single space instead of using creating own class               lt div id  bulkOptionContainer  class  col-xs-4  gt           lt select class  form-control  name    id    gt               lt option value    gt Select Options lt  option gt               lt option value    gt Published lt  option gt               lt option value    gt Draft lt  option gt               lt option value    gt Delete lt  option gt           lt  select gt       lt  div gt        lt div class  col-xs-4  gt            lt input type  submit  name  submit  class  btn btn-success   value  Apply  gt            amp nbsp           lt a class  btn btn-primary  href  add posts php  gt Add post lt  a gt        lt  div gt     lt  form gt    CLICK ON IMAGE

User · Answer

Please pay attention to the comments after the 2 lines    box1       display  block      padding  10px      margin-bottom  100px     SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT  This changes the space below box1        text-align  justify      box2       display  block      padding  10px      text-align  justify      margin-top  100px     OR ADD THIS LINE AND SET YOUR PROPER SPACE as the space above box2

User · Answer

I m assuming you want the two boxes in the sidebar to be next to each other horizontally  so something like this fiddle  That uses inline-block  or you could achieve the same thing by floating the boxes   EDIT - I ve amended the above fiddle to do what I think you want  though your question could really do with being clearer  Similar to  balexandre s answer  though I ve used  nth-child odd  instead  Both will work  or if support for older browsers is important you ll have to stick with another helper class

User · Answer

You can make use of the first-child selector   lt div class  sidebar  gt       lt div class  box  gt           lt p gt               Text is here           lt  p gt        lt  div gt       lt div class  box  gt           lt p gt               Text is here           lt  p gt        lt  div gt   lt  div gt    and in CSS   box       padding  10px      text-align  justify      margin-top  20px     box first-child       margin-top  none      Example  http   jsbin com ozarot edit javascript html live

User · Answer

I know this was an old answer  but i would like to share my simple solution   give style  margin-top 5px    lt div style  margin-top 5px  gt    div 1  lt  div gt   lt div style  margin-top 5px  gt    div2 elements  lt  div gt        div3 elements

[html] How to make a gap between two DIV within the same column

Examples related to html

Examples related to css