"margin: 0 auto" is not centering

Question

this is driving me crazy... can someone please tell me why the center column simply won't center in between the left and right columns? I'm trying to do that by using margin: 0 auto; on the center column.

    $(document).ready(function(){
        $("#hide-show").click(function(){
            $("#panel").slideToggle();
        });
    });

        .main-wrapper{
            margin: 0 auto;
            width: 70%;
        }
        
        #panel{
            width: 100%;
            background-color: aqua;
            display: none;
            position: relative;
            float: left;
        }
        .wrapper{
            width: 100%;
        }
        .images{
            width: 100%;
        }
        #img-1{
            background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
            background-size:contain;
            height: 300px;
            width: 100%;
        }
        .col {
            width: 32%;
            float: left;
            overflow: hidden;
            background: red;
            border: 2px solid black;
        }

        .col:last-child{
            float: right;
        }

        #testing{
            background: yellow;
            margin: 0 auto;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
    <button id="hide-show" name="Click me">Click me</button>
    <div id="panel">
        <div class="wrapper">
            <div class="col">
                <p>Hello world! 2</p>
                <div id="img-1" class="images"></div>
            </div>
            <div class="col" id="testing">
                <p>Hello world! 3</p>
            </div>
            <div class="col">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque,
                    voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
                    rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
            </div>
        </div>
    </div>

    <p>Hello world! 4</p>
    </div>

Here I put a JSFiddle together: JSFiddle

Thank you!

Check [this](http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto) out. — pushkin, Aug 02 '15 at 04:42
Thanks for the reply @Pushkin, It is stated on the post that I should define a width to the element that I'm trying to center. If you see my `.col` CSS rule, all the columns have 32% width and I'm trying to center one column. So I suppose that post is for a different case than mine. — Alexandre Krabbe, Aug 02 '15 at 04:46
short answer - `float`s are the problem - see https://jsfiddle.net/97nbtgtb/1/ for one possible fix — Jaromanda X, Aug 02 '15 at 04:46
Oh, that solves everything xD So i can't center a floating element? Thanks for the help @JaromandaX — Alexandre Krabbe, Aug 02 '15 at 04:48
If they are all the same width, why not just float them all to the left? — VIDesignz, Aug 02 '15 at 04:49
Because then there would be a blank space on the right side of the panel — Alexandre Krabbe, Aug 02 '15 at 04:53

score 1 · Answer 1 · answered Aug 02 '15 at 04:48

1

margin: 0 auto; will not work here since you have float: left; here.

Increase width of the column to 33.33%. and add box-sizing: border-box;

.col {
  width: 33.33%;
  float: left;
  overflow: hidden;
  background: red;
  border: 2px solid black;
  box-sizing: border-box;
}

answered Aug 02 '15 at 04:48

Felix A J

6,300
2
27
46

That only takes out the margin, like you said it doesn't work because I have `float: left;` so as @JaromandaX suggested I should just do `float: none;` on the element that I'm trying to center, that way I can keep the margins. Thanks for the reply @afelixj – Alexandre Krabbe Aug 02 '15 at 04:52

score 1 · Answer 2 · answered Aug 02 '15 at 04:56

I changed your float:left to display:inline-block;

    $(document).ready(function() {
      $("#hide-show").click(function() {
        $("#panel").slideToggle();
      });
    });

        .main-wrapper {
          margin: 0 auto;
          width: 70%;
        }
        #panel {
          width: 100%;
          background-color: aqua;
          display: none;
          position: relative;
          float: left;
        }
        .wrapper {
          width: 100%;
          height: 800px;
        }
        .images {
          width: 100%;
        }
        #img-1 {
          background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
          background-size: contain;
          height: 300px;
          width: 100%;
        }
        .col {
          width: 32%;
          height: 100%;
          display: inline-block;
          overflow: hidden;
          background: red;
          border: 2px solid black;
        }
        .col:last-child {
          float: right;
        }
        #testing {
          background: yellow;
          margin-left: auto;
          margin-right: auto;
        }

<div class="main-wrapper">
  <button id="hide-show" name="Click me">Click me</button>
  <div id="panel">
    <div class="wrapper">
      <div class="col">
        <p>Hello world! 2</p>
        <div id="img-1" class="images"></div>
      </div>
      <div class="col" id="testing">
        <p>Hello world! 3</p>
      </div>
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
          rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
      </div>
    </div>
  </div>

  <p>Hello world! 4</p>
</div>

Thanks @RachelGallen, that worked to solve the margin problem but it messed the height of the columns for some reason. Apparently I could simply just remove the floating property from the middle column and it worked. Thanks for the help! — Alexandre Krabbe, Aug 02 '15 at 05:00
@AlexandreKrabbe i changed the height of the columns to 100% you can change it back — Rachel Gallen, Aug 02 '15 at 05:14

Jaromanda X · Accepted Answer · 2015-08-02T05:03:06.147

floated elements don't behave well with others

as it's a 3 column output, however, it's an easy fix

in general:

html:

<div class='leftColumn col'> ... </div>
<div class='rightColumn col'> ... </div>
<div class='centerColumn col'> ... </div>
<div class='clearFloats'></div>

css

.col { width:32%; }
.leftColumn { float:left; }
.rightColumn { float:right; }
.centerColumn { margin:0 auto; }
.clearFloats { clear:both; font-size:0; line-height: 0; height:0;}

You'll notice the extra "clearFloats" div ... if you don't clear the floats, strange layout issues can happen (not in this case though, it seems) -

I've posted https://jsfiddle.net/97nbtgtb/1/ which changes your markup/css somewhat like above, didn't add any clearing div, and just changed the css to effectively give the center col no float

That is good to know, I should add the clear floats div for this is in the middle of the website I'm trying to create. Why the middle column has to be the last one? — Alexandre Krabbe, Aug 02 '15 at 05:04

score 0 · Answer 4 · answered Aug 02 '15 at 04:54

0

So apparently you can't use margin: auto; on floating elements. The answer to this particular case was to add a float: none; the CSS rule for the middle column as JaromandaX stated in the comments. Thanks for the help guys!

answered Aug 02 '15 at 04:54

Alexandre Krabbe

727
1
13
33

1

no only that, you have to put the center column LAST in the wrapper – Jaromanda X Aug 02 '15 at 04:58
Do you mind posting the answer so I can accept it? I just noticed that, why is it that it has to be the last? – Alexandre Krabbe Aug 02 '15 at 05:01

"margin: 0 auto" is not centering

4 Answers4