How can I align two divs horizontally?

Question

I need to align two divs next to each other, so that each contains a title and a list of items, similar to:

<div>
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div>
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

It's remarkably easy to do with tables, but I don't want to use tables. How can I achieve this?

@TylerH, how is this a duplicate of a question asked nearly a year after this was asked? — DaveDev, Feb 24 '19 at 23:53
age of the question is only one aspect to consider when closing questions as a duplicate; the far more important aspect to consider is which question has better answers and covers not only the second question, but others as well. This is called a canonical question. In this case, there are 8 answers that say "float" and 2 that say "use flexbox". The other question contains solutions that cover both of those *and more*, making it a better target. — TylerH, Feb 25 '19 at 00:19

score 64 · Accepted Answer · edited Sep 20 '17 at 18:43

64

Float the divs in a parent container, and style it like so:

.aParent div {
    float: left;
    clear: none; 
}

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

edited Sep 20 '17 at 18:43

TylerH

20,799
66
75
101

answered Mar 10 '10 at 13:24

Robusto

31,447
8
56
77

If you give an element a float, it is redundant at best to also give it a `clear:none`. – Frank Conijn - Support Ukraine Jul 14 '14 at 17:00
2

This was answered when some older browsers didn't always enforce the `clear:none` with floats. – Robusto Sep 16 '15 at 13:09

Antoine Neff · Answer 2 · 2018-08-27T11:19:54.760

39

Nowadays, we could use some flexbox to align those divs.

.container {
    display: flex;
}

<div class="container">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

edited Aug 27 '18 at 11:19

answered Jul 19 '16 at 22:10

Antoine Neff

446
4
7

Thanks, didn't know of `display: flex`. Added the link so people will easily see the CSS3 background. – akauppi Aug 02 '16 at 13:46
Even Edge can implement it correctly! Chrome, watta faq?! Version 79.0.3945.88 (Official Build) (64-bit) [not working in it...] – iorgv Jan 01 '20 at 12:17
The same in Opera [not working]! – iorgv Jan 01 '20 at 12:25
1

In 2021, all modern browsers support the flex. Thanks – Tahir Alvi Mar 05 '21 at 09:30

coderex · Answer 3 · 2010-03-10T13:33:14.640

21

<div>
<div style="float:left;width:45%;" >
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div style="float:right;width:45%;">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>

Clear must be used so as to prevent the float bug (height warping of outer Div).

style="clear:both; font-size:1px;

edited Mar 10 '10 at 13:33

answered Mar 10 '10 at 13:27

coderex

27,225
45
116
170

1

What does the final nested div do? Why `clear:both`? why `font-size:1px` ? – Cheeso Mar 10 '10 at 13:29
2

To clear the floats. I believe the "font-size: 1px" is an IE compatibility thing. I could be wrong. – psiko.scweek Mar 10 '10 at 15:18

score 4 · Answer 4 · answered Mar 10 '10 at 13:26

4

You need to float the divs in required direction eg left or right.

answered Mar 10 '10 at 13:26

Sarfraz

377,238
77
533
578

score 3 · Answer 5 · edited Sep 20 '17 at 18:41

3

Wrap them both in a container like so:

.container{ 
    float:left; 
    width:100%; 
}
.container div{ 
    float:left;
}

<div class='container'>
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

edited Sep 20 '17 at 18:41

TylerH

20,799
66
75
101

answered Mar 10 '10 at 13:26

Brant

5,721
4
36
39

The container itself doesn't have to be floated. – Frank Conijn - Support Ukraine Jul 14 '14 at 17:02

score 3 · Answer 6 · edited Sep 20 '17 at 18:42

Add a class to each of the divs:

.source, .destination {
    float: left;
    width: 48%;
    margin: 0;
    padding: 0;
}
.source {
    margin-right: 4%;
}

<div class="source">
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>
<div class="destination">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

That's a generic percentages solution - using pixel-based widths is usually much more reliable. You'll probably want to change the various margin/padding sizes too.

You can also optionally wrap the HTML in a container div, and use this CSS:

.container {
  overflow: hidden;
}

This will ensure subsequent content does not wrap around the floated elements.

score 3 · Answer 7 · edited Jun 27 '20 at 13:07

3

float is obsolete, better use display: flex;:

example :

.parent-div{ display: flex; }

indicate the direction by flex-direction: row/column;. go down if no space by flex-wrap: wrap/nowrap;

more properties here.

edited Jun 27 '20 at 13:07

Tim Barrass

4,813
2
29
55

answered Jan 02 '19 at 18:15

infantry

336
1
5
15

score 1 · Answer 8 · edited Sep 20 '17 at 18:39

if you have two divs, you can use this to align the divs next to each other in the same row:

#keyword {
    float:left;
    margin-left:250px;
    position:absolute;
}

#bar {
    text-align:center;
}

<div id="keyword">
Keywords:
</div>
<div id="bar">
    <input type = textbox   name ="keywords" value="" onSubmit="search()" maxlength=40>
    <input type = button   name="go" Value="Go ahead and find" onClick="search()">
</div>

score -2 · Answer 9 · answered Mar 10 '10 at 13:27

-2

<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>

<body>
<div id="floatingDivs">
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div id="floatingDivs">
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

</body>
</html>

answered Mar 10 '10 at 13:27

Pratik Deoghare

35,497
30
100
146

An id may be used only once. – Frank Conijn - Support Ukraine Jul 14 '14 at 16:58
It can be used more than once, but shouldn't be. – Raydot Oct 26 '18 at 19:26

score -2 · Answer 10 · answered May 27 '15 at 12:38

For your purpose, I'd prefer using position instead of floating:

http://jsfiddle.net/aas7w0tw/1/

Use a parent with relative position:

position: relative;

And children in absolute position:

position: absolute;

In bonus, you can better drive the dimensions of your components.

How can I align two divs horizontally?

10 Answers10

Linked

Related