How to get these two divs side-by-side?
CssLayoutHtmlCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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)
Solution 2 - Css
#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/
Solution 3 - Css
I found the below code very useful, it might help anyone who comes searching here
<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
Solution 4 - Css
Using flexbox it is super simple!
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
Solution 5 - Css
Using the style
.child_div_1 {
float:left
}
Solution 6 - Css
Best that works for me:
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}
Solution 7 - Css
Using flexbox
#parent_div_1{
display:flex;
flex-wrap: wrap;
}
Solution 8 - Css
User float:left property in child div class
check for div structure in detail : http://www.dzone.com/links/r/div_table.html