Search code examples
csslayouthtml

How to get these two divs side-by-side?

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?

Solution 
  • #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/