How to get these two divs side-by-side

Question

I have two divs that are not nested  one below the other  They are both within one parent div  and this parent div repeats itself  So essentially    lt div id  parent div 1  gt     lt div class  child div 1  gt  lt  div gt     lt div class  child div 2  gt  lt  div gt   lt  div gt    lt div id  parent div 2  gt     lt div class  child div 1  gt  lt  div gt     lt div class  child div 2  gt  lt  div gt   lt  div gt    lt div id  parent div 3  gt     lt div class  child div 1  gt  lt  div gt     lt div class  child div 2  gt  lt  div gt   lt  div gt    I want to get each pair of child div 1 and child div 2 next to each other  How can I do this

User · Answer

Best that works for me     left     width 140px     float left     height 100         right     margin-left 140px        http   jsfiddle net jiantongc 7uVNN

User · Answer

Using the style   child div 1       float left

User · Answer

Using flexbox it is super simple    parent div 1   parent div 2   parent div 3       display  flex      Fiddle example

User · Answer

parent div 1   parent div 2   parent div 3     width  100px    height  100px    border  1px solid red    margin-right  10px    float  left     child div 1     float  left    margin-right  5px      Check working example at http   jsfiddle net c6242 1

User · Answer

Using flexbox      parent div 1       display flex       flex-wrap  wrap

User · Answer

Since div s by default are block elements - meaning they will occupy full available width  try using -  display inline-block    The div is now rendered inline i e  does not disrupt flow of elements  but will still be treated as a block element   I find this technique easier than wrestling with floats    See this tutorial for more - http   learnlayout com inline-block html  I would recommend even the previous articles that lead up to that one   No  I did not write it

User · Answer

User float left property in child div class   check for div structure in detail   http   www dzone com links r div table html

User · Answer

I found the below code very useful  it might help anyone who comes searching here   x000D   x000D   lt html gt  x000D   lt body gt  x000D       lt div style  width  50   height  50   background-color  green  float left   gt - lt  div gt  x000D       lt div style  width  50   height  50   background-color  blue  float right   gt - lt  div gt  x000D       lt div style  width  100   height  50   background-color  red  clear both  gt - lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[css] How to get these two divs side-by-side?

Examples related to css

Examples related to layout

Examples related to html