How do I position two divs horizontally next to each other?
Solution 1
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.
Solution 2
Both are valid CSS that does not work by accident -- it depends what you need.
When using float
s, you will need to clear them (as in the posted code); when using inline-block
s, 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;
}
Solution 3
Use Float(First method). Because its support all browser and its easy to handle. Here the link you can learn more
Solution 4
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.
Michel
Updated on November 28, 2021Comments
-
Michel over 2 years
On two different projects I learned two different methods of positioning two
div
s 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>
-
Michel over 11 yearsGood point, didn't think of that. Span's however always give me an issue if i want to add padding / margin...
-
Solace almost 10 yearsHow 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? -
Ben almost 10 years@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: stackoverflow.com/questions/4028833/…, basic idea is use a float div and regular div, put a margin on the regular as wide as the floated. -
Solace almost 10 yearsThank 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.