how to evenly distribute elements in a div next to each other?

css distribute evenly vertically
css evenly distribute divs horizontally
css evenly distribute list items horizontally
justify-content
flexbox
css grid
css padding
span html

This is meant for a menu. For example I have a div element with 3 spans in it, all of which have some margin, max-width and float (left or right). It is positioned starting from the left side and goes like this: [[span1][span2][span3] - lots of free space here]. I want to make it even out like this: [[span1] - space - [span2] - space - [span3]] How can I do this using CSS? I kinda doubt it is not possible. Note that I want it to keep the same style when I add or remove a menu item. HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

How to place two divs next to each other in HTML?, in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin. Option 1. Use float:left on both div elements and set a % width for both div elements with a combined total width of 100%. Use box-sizing: border-box; on the floating div elements. The value border-box forces the padding and borders into the width and height instead of expanding it.


You can use justify.

This is similar to the other answers, except that the left and rightmost elements will be at the edges instead of being equally spaced - [a...b...c instead of .a..b..c.]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

One gotcha is that you must leave spaces in between each element. [See the fiddle.]

There are two reasons to set the menu items to inline-block:

  1. If the element is by default a block level item (such as an <li>) the display must be set to inline or inline-block to stay in the same line.
  2. If the element has more than one word (<span>click here</span>), each word will be distributed evenly when set to inline, but only the elements will be distributed when set to inline-block.

See the JSFiddle

EDIT: Now that flexbox has wide support (all non-IE, and IE 10+), there is a "better way". Assuming the same element structure as above, all you need is:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

If you want the outer elements to be spaced as well, just switch space-between to space-around. See the JSFiddle

How to place two div elements next to each other, How do you put elements next to each other in HTML? I have a situation where I have a variable number of elements 2-5 and I want to evenly distribute them across a variable width div. That is pretty straightforward, but there is an additional twist. I want to limit the horizontal space between each element to a max value.


If someone wants to try a slightly different approach, they can use FLEX. HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

Here is the fiddle: http://jsfiddle.net/ynemh3c2/ (Try adding/removing divs as well) Here is where I learned about this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Distributing Space Inside a Flex Container, This is meant for a menu. For example I have a div element with 3 spans in it, all of which have some margin, max-width and float (left or right). It is positioned  why wouldn’t the wrapping id div thumbs be used as a container with a top padding of 90px, and the other internal elements use a simple class (not an id so it can be reused), that all float left. that way they horizontally align perfectly, and also the wrapping container provides the margin you are looking for. you’ll also use considerably much less code to accomplish what you want.


justify-content: space-betweenanddisplay: flex is all we needed, but thanks to @Pratul for the inspiration!

css, Creating a horizontal row of objects that are equidistant from each other is another one My next stab was to give each element, except the first one, a common that sometimes-useful-sometimes-infuriating ability to auto space it's cells evenly. #movers-row { margin: -120px 0 0 120px; } #movers-row div { width: 33.3%;  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.


This is the quick and easy way to do it

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

Then adjust the width of the spans for the number you have.

Example: http://jsfiddle.net/jasongennaro/wvJxD/

Equidistant Objects with CSS, This is meant for a menu. For example I have a div element with 3 spans in it, all of which have some margin, max-width and float (left or right). It is positioned  You'll need to set the width of the li elements to force them to fill the space: If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%. Yet another approach. This is something I use when trying to span a menu evenly across the page.


how to evenly distribute elements in a div next to each other?, The divs do not display inline with each other at 50% width because inline elements respect the word spacing  PASS: First on the left, float the rest right in equal size boxes. Fortunately the table idea sparked some thought. The first image needs to be left aligned, but all the rest of them could be right-aligned. In fact, if they are, and also inside of boxes that divide the rest of that space evenly, that might just do it.


How to Make Inline-Block Elements Add Up to 100% Width – UX , That is, the 3 divs in each div row need to align up next to each other, not set to "center" then the child elements would be centered evenly within their parent. If the elements are not all of equal height (as is often the case with dynamic content), then odd “stacking” will eventual happen on multiple rows, when an item in the previous line has more height then other items in the same row, and the next row can’t slide all the way over to the left.


How to align divs in a row, Equally spacing elements across a horizontal area so that the first and height then other items in the same row, and the next row can't slide all the give us that perfect spread from left to right with our elements flush to the  Iv got a div which is of about 70% width of the page. Inside the div I need 5 divs next to each other on a row each of about 50px in width. What I need is to evenly space these 50px divs out within the parent div horizontally, from one side to the other.