Horizontally align div without float

Question

I want to know if there exists an elegant way to horizontally align 3 divs without using float css property.

HTML:

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
</div>

I ask this question because the parent div has not float property and adding float to children cause problems on page resizing.

http://stackoverflow.com/questions/17130711/how-align-2-adjacent-divs-horizontally-without-float — 4dgaurav, Jun 17 '14 at 10:29

score 36 · Accepted Answer · edited May 23 '17 at 11:55

36

You can use display:inline-block or display:table-cell with the inner content.

Flex layout (See also T J's answer):

#parent{ display:flex; justify-content: space-between; }

JSFiddle

Table layout:

#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

Inline-block layout :

#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

edited May 23 '17 at 11:55

Community

1
1

answered Jun 17 '14 at 10:26

potashin

44,205
11
83
107

@potashin can you please tell me the how to align four divs – Muhammad Hamza Shahid Jun 13 '16 at 19:09
@MuhammadHamzaShahid: well, it is pretty much the same, the only difference depends on how you want to align items in the container itself – potashin Jun 13 '16 at 19:15

score 13 · Answer 2 · edited May 23 '17 at 11:33

13

Adding to notulysses's answer, If ancient browser support is not an issue, you can use css3 Flexible_boxes.

By applying display:flex the child divs will be aligned horizontally (by default)

#parent{
 display:flex;
 justify-content:space-around;
}

more about flexbox @ CSSTricks

This will avoid the white space issue with inline-block elements

JSfiddle

edited May 23 '17 at 11:33

Community

1
1

answered Jun 17 '14 at 10:29

T J

42,762
13
83
138

2

I think this is the overall better answer. – Ethan Bierlein Mar 15 '15 at 16:28

score 1 · Answer 3 · edited Mar 02 '15 at 16:24

1

#parent { 
    display: table; 
}

#first, #second, #third { 
    display: table-cell; 
}

edited Mar 02 '15 at 16:24

TylerH

20,799
66
75
101

answered Jun 17 '14 at 10:31

Ankit Agrawal

6,034
6
25
49

7

You should add a short explanation as to why this answer will work. Please also note that inline css is not generally seen as good code. There is also no need to repeat the same HTML here in your answer, so you can just post the pure CSS as answer. – Praxis Ashelin Jun 17 '14 at 10:39
1

@DarkAshelin it's just for example, he can put this css into css file – Ankit Agrawal Jun 17 '14 at 10:43
2

Even if it was just an example, it would encourage inexperienced coders to use this "cluttered / bad way" of coding by copying what you typed. – Praxis Ashelin Jun 17 '14 at 10:45

score 1 · Answer 4 · edited Jan 06 '15 at 09:31

1

Instead of finding a workaround for floating, you could also use the following fix for your "resizing problems" (at least what I think it is caused by):

After using floats, you should always clear your floats. You can do this by adding an extra <div> with a class.

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
  <div class="clear"></div>
</div>

In CSS:

.clear{
  clear: both;
}

edited Jan 06 '15 at 09:31

Madara's Ghost

172,118
50
264
308

answered Jun 17 '14 at 10:37

Praxis Ashelin

5,137
2
20
46

@notulysses: Can you not change the indentation styles of other people's answers when the code is perfectly readable as it is? All it will do is piss people off for no real benefit. If you're editing answers to add syntax highlighting, adding the language hint alone is enough. – BoltClock Mar 02 '15 at 16:27

score 0 · Answer 5 · edited Jan 05 '15 at 22:43

0

Use the CSS style below :

#parent div{ display: inline-block; }

Working Fiddle

edited Jan 05 '15 at 22:43

potashin

44,205
11
83
107

answered Jun 17 '14 at 10:30

Sid

801
8
19

score 0 · Answer 6 · edited Jan 05 '15 at 22:44

With the CSS below you can achieve your goal :

#parent{
 width:140px;
    height:30px;
    border:1px solid #CCC; 
}
#first{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid red;
}
#second{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid green;
}
#third{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid blue;
}

Fiddle

Horizontally align div without float

6 Answers6

Linked