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?
Using flexbox
#parent_div_1{
display:flex;
flex-wrap: wrap;
}
User float:left property in child div class
check for div structure in detail : http://www.dzone.com/links/r/div_table.html
Using flexbox it is super simple!
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
Best that works for me:
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}
Using the style
.child_div_1 {
float:left
}
I found the below code very useful, it might help anyone who comes searching here
<html>_x000D_
<body>_x000D_
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>_x000D_
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>_x000D_
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>_x000D_
</body>_x000D_
</html>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)
Source: Stackoverflow.com