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


Css 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 id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></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 -


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

Solution 3 - Css

I found the below code very useful, it might help anyone who comes searching here

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

Solution 4 - Css

Using flexbox it is super simple!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;

Fiddle example

Solution 5 - Css

Using the style

.child_div_1 {

Solution 6 - Css

Best that works for me:



Solution 7 - Css

Using flexbox

     flex-wrap: wrap;

Solution 8 - Css

User float:left property in child div class

check for div structure in detail :


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJustin MeltzerView Question on Stackoverflow
Solution 1 - CssRobin MabenView Answer on Stackoverflow
Solution 2 - CssHusseinView Answer on Stackoverflow
Solution 3 - CssaxsView Answer on Stackoverflow
Solution 4 - CssSolView Answer on Stackoverflow
Solution 5 - Cssamit_gView Answer on Stackoverflow
Solution 6 - CssjiantongcView Answer on Stackoverflow
Solution 7 - CssdasfdsaView Answer on Stackoverflow
Solution 8 - CssPranay RanaView Answer on Stackoverflow