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;
}

Anand Jaju · Answer 1 · 2014-03-05T09:44:49.157

2

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

Check following fiddle: jsFiddle Demo

edited Mar 05 '14 at 09:44

answered Mar 05 '14 at 07:35

Anand Jaju

458
3
12
28

that's more correct though not centered. here's a revised example with images as that's what i'm trying to center http://jsfiddle.net/clam22/38L6Y/22/ – Clam Mar 05 '14 at 08:09
1

yah its right it will not be at center as you given width of blue, red and green as 30% which is totaling to 90% not 100%, so change it to 33.33% it will show you centered.. see in fiddle... http://jsfiddle.net/38L6Y/31/ – Anand Jaju Mar 05 '14 at 09:44
thanks yeah. that's right. is there a way to still keep the image centered when you change the image smaller than 100%? – Clam Mar 13 '14 at 08:07

score 2 · Accepted Answer · answered Mar 05 '14 at 07:43

2

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

Check this out:

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

answered Mar 05 '14 at 07:43

vaskort

2,591
2
20
29

i think this artificially makes the diff seem centered because of the width. And I think that's fine.. but I actually have images inside those divs that I wanted centered as well. Having trouble centering those along with the div... – Clam Mar 05 '14 at 07:57
Does it work if you use margin:0 auto; in every single coloured div? Does it center your images inside ? – vaskort Mar 05 '14 at 08:01
no. i got it to this.. not centered but... away from the left haha.. http://jsfiddle.net/clam22/38L6Y/22/ – Clam Mar 05 '14 at 08:08
thanks yeah. that's right. is there a way to still keep the image centered when you change the image smaller than 100%? – Clam Mar 13 '14 at 08:08
Yes if you have lets say 50px height on the image if you put height:100px; and line-height:100px; to the parent (the coloured div) the image will be centered. But you want a responsive approach so check this link: http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height – vaskort Mar 13 '14 at 14:11

OrderAndChaos · Answer 3 · 2014-03-05T07:51:32.937

1

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;
}

edited Mar 05 '14 at 07:51

answered Mar 05 '14 at 07:35

OrderAndChaos

3,547
2
30
57

i got it as far as this http://jsfiddle.net/clam22/38L6Y/21/ but that's still not centered. I put an image in because that is essentially what i want centered. not just empty divs – Clam Mar 05 '14 at 08:04
You need to use height:auto on responsive images and you need to give the images 33% (or 33.3333% if you like) width. see here http://jsfiddle.net/8JgkP/1/ – OrderAndChaos Mar 05 '14 at 09:39
yeah thanks. you guys were more or less on it. i was trying to decrease my image size while still keeping it centered. I am not entirely sure how to do that but i'm working on a 100% image size for now... – Clam Mar 13 '14 at 08:09

score 0 · Answer 4 · answered Mar 05 '14 at 07:38

0

Try this.

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

answered Mar 05 '14 at 07:38

RamGrg

296
1
4
20

Nor Sakinah Abdullah · Answer 5 · 2014-03-05T08:26:45.233

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.

Center floating div with margin auto not working

5 Answers5