How do I position two divs horizontally next to each other?

Question

On two different projects I learned two different methods of positioning two divs horizontally next to each other. Is one better than the other, or is it just a matter of personal taste, or maybe one is only working by coincidence?

Method one:

.container,
.div1,
.div2 {
  border: 1px solid red;
}

.div1,
.div2 {
  float: left;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
  <div style="clear: both;"></div>
</div>

Method two:

.container,
.div1,
.div2 {
  border: 1px solid green;
}

.div1,
.div2 {
  display: inline-block;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
</div>

Ben · Accepted Answer · 2021-05-10T17:00:06.447

12

The first one is more widely supported in older browsers, but float usually leads to some weird behavior (not bad, nothing that will break your design, just a little unexpected).

You'll crank away with inline-block only to find something broken in your design when you check some random browser later on in the lifecycle.

I usually stick with float, and only float.

EDIT

Revisiting this answer almost 10 years later and my recommendation now would be stick with flexbox and only flexbox. Try out https://flexboxfroggy.com/ if you need some practice.

edited May 10 '21 at 17:00

answered Nov 23 '12 at 08:28

Ben

54,723
49
178
224

How do you deal with more than two divs which need to be aligned horizontally? Forexample if there are three divs? There is no `float:middle;` right? – Solace Aug 02 '14 at 22:55
1

@Zarah - unfortunately no `float: middle;` (small lol) and for three div equal-height columns, you'll need to google it, there's a lot of (complicated) approaches. Two divs is fairly straightforward: http://stackoverflow.com/questions/4028833/two-divs-left-should-be-fixed-width-right-should-fill-rest-of-space/4031247#4031247, basic idea is use a float div and regular div, put a margin on the regular as wide as the floated. – Ben Aug 02 '14 at 23:52
Thank you very much for the response. "basic idea is use a float div and regular div, put a margin on the regular as wide as the floated."- this makes sense. I'll Google it. – Solace Aug 03 '14 at 02:01

score 4 · Answer 2 · answered Nov 23 '12 at 08:35

Both are valid CSS that does not work by accident -- it depends what you need.

When using floats, you will need to clear them (as in the posted code); when using inline-blocks, this is not necessary. Also, you can use text-align to align the inline-block elements, while there is no float: middle. You can also use the vertical-align property to align the boxes as you need.

As others said, there are some issues with inline-block, most notably that older IEs don't support it (much) on block elements (note that it works fine on inline elements, like <span>). You can work around that with the following hack:

.selector {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

score 2 · Answer 3 · answered Nov 23 '12 at 08:32

2

Use Float(First method). Because its support all browser and its easy to handle. Here the link you can learn more

answered Nov 23 '12 at 08:32

Selvamani

7,434
4
32
43

score 1 · Answer 4 · answered Nov 23 '12 at 08:28

1

If you are using the second method then there's no point in using a DIV if you are then turning it into a inline element. Just use a SPAN tag.

So if you are trying to align block level elements/tags, use the first method.

answered Nov 23 '12 at 08:28

Jan Hančič

53,269
16
95
99

Good point, didn't think of that. Span's however always give me an issue if i want to add padding / margin... – Michel Nov 23 '12 at 08:43

How do I position two divs horizontally next to each other?

4 Answers4