Center floating div with margin auto not working

Question

I'm not sure what I'm doing wrong but I'm just trying to center this while still being able to deal with responsiveness.

Want to get all the divs centered but margin:auto doesn't work.. Probably missing something simple.

I have some images inside the colour divs and that's the part I am actually having trouble centering.

Here's a jsfiddle.

http://jsfiddle.net/clam22/38L6Y/22/

HTML is below

<div class="wrapper">
    <div class="row">
        <div id="red">
<img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>
        <img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        <div id="green">
        </div>

        <div id="blue">
<img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>

    </div>
</div>

Example CSS below

   html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
margin: 0 auto;
height: 100%;
width: 100%;
} 


.wrapper {
max-width: 96%;
height: 100%;
width: 90%;
}

.row {
float:left;
margin: 0 auto;
width: 100%;
height: 30%;
}

#red {
    background-color:red;
    height:30%;
width: 30%;
    float:left;
}

#green {
    background-color:green;
    height:30%;
width: 30%;
        float:left;
}

#blue {
    background-color:blue;
    height:30%;
width: 30%;
        float:left;
}

Answer 1

instead of making margin: 0 auto; in html,body, use it in wrapper class

Check following fiddle: jsFiddle Demo

Answer 2

What about making the divs width:33.3% and putting margim:0 auto; on wrapper?

Check this out:

http://jsfiddle.net/38L6Y/15/

Answer 3

There are more problems than I first realised.

Some of your percentages do not make a lot of sense.

When you make an element say 90% it is 90% of it's parent element. So each time you make a div 90% inside another element it will be 10% smaller than it's parent.

I have also moved margin:0 auto to the wrapper as this seems to make more sense.

Please try this.

html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
height: 100%;
width: 100%;
} 


.wrapper {
margin: 0 auto;
height: 100%;
width:90%;
}

.row {
height: 30%;
}

#red {
background-color:red;
height:30%;
width: 33.33334%;
float:left;
}

#green {
background-color:green;
height:30%;
width: 33.33333%;
float:left;
}

#blue {
background-color:blue;
height:30%;
width: 33.33333%;
float:left;
}

Answer 4

Try this.

html,body  {
 background: #FFFFFF;
 font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
 align:center!important;
 height: 100%;
 width: 100%;
} 

Answer 5

Or you can try this (If you still wants each div inside .row class have width=30%)

Check this JSfiddle

.row {
width: 100%;
height: 30%;
margin-left:5%; /*(100%-(30%*3))/2*/ 

}

Since your divs (red,green,blue) have equal width=30%, therefore,margin-left and right should be 5%.That's why I use margin-left:5% since only width=10% left. 10%/2 = 5%.

Sorry, if this is not the solution.

Updated : Check out this updated JSFiddle with your image in each div.