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?

Robin Maben · Answer 1 · 2014-07-01T04:18:43.240

147

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)

edited Jul 01 '14 at 04:18

answered Mar 22 '11 at 06:33

Robin Maben

22,194
16
64
99

I really liked this solution. My only problem with it is that is aligns the bottom of both divs instead of aligning the top. Is there a quick setting for this too? – Chris Sep 12 '13 at 04:41
I would suggest using 2 wrapper `div`s having equal height so then the content inside them would seem to appear top-aligned. – Robin Maben Sep 12 '13 at 05:35
3

I agree. This is much better than `float:left` because it gives you so many more options without redefining your entire layout. Things "just work" this way. Check it out here: http://jsfiddle.net/SrAQd/4 – Jerry Oct 30 '13 at 15:10
14

In order to get vertical alignment I'd add "vertical-align: top;" – cdiggins Nov 06 '13 at 12:20
@Chris: Yes, I agree with cdiggins. That should help you. – Robin Maben Feb 26 '14 at 06:18

score 94 · Accepted Answer · edited Feb 25 '16 at 00:24

94

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

edited Feb 25 '16 at 00:24

Mi-Creativity

9,554
10
38
47

answered Mar 22 '11 at 05:58

Hussein

42,480
25
113
143

1

He wants the children div aligned next to one another, not the parents (at least that was my understanding...) – ehdv Mar 22 '11 at 06:03
4

I still think `display: table-cell` will get results closer to what he means (since then they will have the same height etcetera) but this way will certainly work. – ehdv Mar 22 '11 at 06:09
@ehdv `display: table-cell` is not supported in IE6 IE7. float:left; is the proper way to do this. – Hussein Mar 22 '11 at 06:16
1

Actually the proper way to do this in IE6,7 is with ``, because any other option will break when the user resizes the window. In modern browsers, `display: inline-block` is usually the best option. – John Henckel Dec 01 '16 at 19:42

score 54 · Answer 3 · edited Oct 06 '15 at 15:16

54

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>

edited Oct 06 '15 at 15:16

Joel Peltonen

13,025
6
64
100

answered Jul 11 '12 at 13:49

axs

1,156
1
10
15

score 16 · Answer 4 · answered Jun 02 '18 at 20:06

16

Using flexbox it is super simple!

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

Fiddle example

answered Jun 02 '18 at 20:06

Sol

710
8
13

score 6 · Answer 5 · answered Mar 22 '11 at 05:58

6

Using the style

.child_div_1 {
    float:left
}

answered Mar 22 '11 at 05:58

amit_g

30,880
8
61
118

score 5 · Answer 6 · answered Aug 05 '13 at 00:58

5

Best that works for me:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

answered Aug 05 '13 at 00:58

jiantongc

941
1
11
14

score 3 · Answer 7 · answered Jun 02 '18 at 19:10

3

Using flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

answered Jun 02 '18 at 19:10

dasfdsa

7,102
8
51
93

score 2 · Answer 8 · answered Mar 22 '11 at 05:58

2

User float:left property in child div class

check for div structure in detail : http://www.dzone.com/links/r/div_table.html

answered Mar 22 '11 at 05:58

Pranay Rana

175,020
35
237
263

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

8 Answers8

Linked

Related