Home » Html » How to spread elements evenly (horizonatly)?

How to spread elements evenly (horizonatly)?

Posted by: admin November 30, 2017 Leave a comment

Questions:

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;
}
Answers:

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;
}

Questions:
Answers:

how about text-align:justify; ?

Questions:
Answers:

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>

Questions:
Answers:

I’m not sure what your exact HTML is but try this: http://jsfiddle.net/k9FqG/

<div class="test">
    <a href="">A</a>
    <a href="">B</a>
    <a href="">C</a>
    <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%;
}

Questions:
Answers:

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">&nbsp;</div>
</div>

I only added borders so you could see what the CSS was doing.