How to spread elements horizontally evenly? - html

Question

I have a div container on my web page with fixed width and it contains form elements for logging in. Below these elements there are a submit button, forgotten password link etc.
It happens the last line elements need fewer width than the box provides. How to spread them evenly? I don't want
default
| A B C |
centering the line like
| A B C |
nor table layout
| A | B | C |
Instead I am looking for some CSS way to achieve:
| A B C |
That is:
put about equal space between all elements
center the whole thing to avoid the first or last to the side
edit:
This answer worked best. I created templates for 2 or 3 elements like this:
div.spread2evenly > div {
display: inline-block;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 50%;
text-align: center;
}

Answer 1

CSS3 flexboxes have better browser support now, although you may need to add additional vendor prefixes for more browser coverage.
Modern Approach:
Just change the display of the container element to flex and then utilize the justify-content property to specify how the browser should distribute the space around and between the flex items along the main axis.
In the example below, you will notice that justify-content: space-around or justify-content: space-between are used to space the elements out evenly.
.container {
display: flex;
}
.container.space-around {
justify-content: space-around;
}
.container.space-between {
justify-content: space-between;
}
<p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<hr />
<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
<div>A</div>
<div>B</div>
<div>C</div>
</div>

Answer 2

how about text-align:justify; ?

Answer 3

Try this (http://jsfiddle.net/BYEw5/):
<div class="container">
<div>A</div><div>B</div><div>C</div>
</div>
.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 33%;
text-align: center;
}
Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.
Edit 1:
Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.
Edit 2:
Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:
.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
margin-left: 2%;
width: 32%;
text-align: center;
}
.container > div:first-child {
margin-left: 0;
}

Answer 4

I know this is an ancient question but if someone still happens to look for this, there now is an even easier option using flexboxes: justifiy-content: space-evenly. The name is pretty self explanatory. Here a reference
.container {
display: flex;
justify-content: space-evenly;
}

Answer 5

I'm not sure what your exact HTML is but try this: http://jsfiddle.net/k9FqG/
<div class="test">
A
B
C
<div class="clear"></div>
</div>
.clear {
clear:both;
}
.test {
width:350px;
text-align:center;
border:1px solid #ff0000
}
.test a {
display:block;
float:left;
width:33%;
}

Answer 6

This should get you started:
<style type="text/css">
#container {
width: 210px;
border: 1px solid blue;
}
#container .part {
width: 68px; /*(210 / 3 - borders)*/
float: left;
text-align: center;
border: 1px solid yellow;
}
.clear {
height: 0;
line-height: 0;
overflow: hidden;
font-size: 0;
clear: left;
}
</style>
And then the HTML:
<div id="container">
<div class="part">A</div>
<div class="part">B</div>
<div class="part">C</div>
<div class="clear"> </div>
</div>
I only added borders so you could see what the CSS was doing.

Answer 7

I wanted to perform some hover effect and justify-content: space-between wasn't very clean. This helped for me.
<div style="display: flex;">
<div style="flex: 1 1 auto"> A </div>
<div style="flex: 1 1 auto"> B </div>
<div style="flex: 1 1 auto"> C </div>
</div>
(I originally got this answer from a different S.O. answer a very long time ago. Pardon me for not mentioning original credit, as I don't know)