css - 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:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

I want to get each pair of child_div_1 and child_div_2 next to each other. How can I do this?

Answer 1

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)