progNewbie progNewbie - 1 year ago 118
Javascript Question

Distribute buttons in div evenly

I have the following code (JSFiddle):


<div id="content">
<div id="mainBox" class="textBox">
<div id="mainMenuBar">
<button class="jqueryUIButton">New Diagnosis</button>
<button class="jqueryUIButton">My Diagnosises</button>
<button class="jqueryUIButton">My Account</button>


#mainMenuBar {
background: linear-gradient(to bottom right, #30273a, #8d78a5);
padding: 5px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
resize: none;
border:1px solid #30273a;
box-shadow: 0 0 10px #8d78a5;
border-radius: 15px 15px 15px 15px;

#content {
margin: 0 auto;
margin-top: 100px; // former 250px
padding: 0;
width: 750px;
max-width: 80%;
padding-bottom: 40px;
text-align: center;


$( ".jqueryUIButton" ).button();

Now the three buttons are in the horizontal center of the DIV-Box. But I want them evenly distributed over the whole width. How can I do that?

Would love any advice. Thanks!

Answer Source

Simply use the flexbox model:

display: flex;
justify-content: space-around;

You can also use space-between, and play with margins and padding for a fine-tuned look.

Modified fiddle