Center multiple floating divs next to each other

Question

I'm supposed to make 3 divs sit next to each other. So I made a div and I've put three divs in, with this css style:

div.holder div {
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */
}

And html like this:

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

And it's supposed to look like this: three divs And instead, it looks like this:

The border divs should be aligned with the ending of the grey line.

If you want your "gold div" sticked to the right, the make it `float: right`. — Brewal, Aug 27 '13 at 22:49
@Brewal That's a great idea. Now if you know a way to put the silver one in the middle, I'd be done with it. Maybe I'll try `margin:auto`. — Tomáš Zato, Aug 27 '13 at 22:51
The following thread has exactly what you're looking for [Fluid width with equally spaced DIVs](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs) — Itay, Aug 27 '13 at 22:53
oh - I'm sorry, I couldn't figure out the correct query to search. — Tomáš Zato, Aug 27 '13 at 22:55

Matthew R. · Accepted Answer · 2013-08-27T22:53:39.460

You are specifying a pixel value for your width. No matter what you do with your floats, those pixel values are fixed and will never reach the end of the border. What you can do is set the width to a percentage like width: 33%;. You could also set your left and right margins to space out your divs like margin: 0 20px;.

What I typically do in these situations is wrap my elements in a div and use that div for positioning the elements. Then, the inner container I will use for background colors, text colors, etc. Something like that may work for you:

<div class="holder">
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
</div>

And the CSS:

.wrapper {
    float:left;
    width:33%;
}
.container {
    background-color: yellow;
    margin: 10px;
    padding: 20px;
}

Here is a fiddle: http://jsfiddle.net/bWFS8/

score 0 · Answer 2 · edited Dec 18 '15 at 11:05

0

If you're going to have them all aligned horizontally then you should really use an unordered list styled to display inline block with zoom:1 and display:inline.

There is no reason to use a float to position these all side by side.

edited Dec 18 '15 at 11:05

Tomáš Zato

50,171
52
268
778

answered Aug 28 '13 at 04:07

THE AMAZING

1,496
2
16
38

score 0 · Answer 3 · answered Dec 24 '13 at 08:03

Thats what I use when I want divs next to each other:

CSS:

#menuitem {
font-weight:bold;
border-right-style:solid;
font-size:10.7px;
border-right-width:1px;
border-left-width:1px;
height:30px;
position:relative;
}

#menuitem span {
position:absolute;
text-align: center;
}

#menubar {
margin-top:10px;
position:absolute;
left:0px;
font-family:Verdana, Geneva, sans-serif;
}

HTML:

<div id="menubar">
<div style="float:left;width:104px;border-left-style:solid;" id="menuitem"><span style="bottom:9px;width:104px;">Menu Item 1</span></div>
<div style="float:left;overflow:hidden;width:78px;" id="menuitem"><span style="bottom:7px;width:78px;">Menu Item 2</span></div>
<div style="float:left;overflow:hidden;width:100px;" id="menuitem"><span style="bottom:9px;width:100px;">Menu Item 3</span></div>
</div>

Hope I helped.

Center multiple floating divs next to each other

3 Answers3