centering a div within a div

Question

I realize this has been asked a lot on SO, but after trying solutions from a bunch of different entries, I just can't seem to get it to work on mine. The answer is probably something easy i'm overlooking. Im just trying to get these 3 cells to be centered in the fixed container width of 1024px. Please help o' stackoverlords!

http://jsfiddle.net/uvb1u8y1/15/

#container {
width:1024px;
position:absolute;
background-color: #7f82a3;
}
#topgrid {
margin: 0 auto;
}
.toptile {
position:relative;
display: block;
float:left;
margin-left:10px;
margin-top:10px;
}
.topslider {
margin: 0px auto;
}
.contenthover {
padding: 15px 20px 0px 20px;
}
.contenthover {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size:12px;
}
.contenthover h4 {
font-size:20px;
font-weight:normal;
}
.contenthover h4, .contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
 .contenthover a {
font-family:'Droid Sans', sans-serif;
font-weight:700;
}
.contenthover a.mybutton {
margin: 20px 0 0 40px;
font-size:21px;
padding: 10px 15px;
color: #fff;
background: -webkit-linear-gradient(#5bc5de, #0b75b9);
background: -o-linear-gradient(#5bc5de, #0b75b9);
background: -moz-linear-gradient(#5bc5de, #0b75b9);
background: linear-gradient(#5bc5de, #0b75b9);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-style: solid;
border-color: #007ac9;
}
.contenthover a.mybutton:hover {
background: #005588;
}

<div id="container">
<div id="topgrid">
    <div class="toptile">
        <div class="topslider">
            <img class="topslidercell" src="http://placehold.it/300x200" width="300" height="200" />
            <div class="contenthover">

 <h4>lorem Ipsum</h4>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                <br /> <a href="#" class="mybutton">Click to Install</a>

            </div>
        </div>
    </div>
    <div class="toptile">
        <div class="topslider">
            <img class="topslidercell" src="http://placehold.it/300x200" width="300" height="200" />
            <div class="contenthover">

 <h4>lorem Ipsum</h4>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                <br /> <a href="#" class="mybutton">Click to Install</a>

            </div>
        </div>
    </div>
    <div class="toptile">
        <div class="topslider">
            <img class="topslidercell" src="http://placehold.it/300x200" width="300" height="200" />
            <div class="contenthover">

<h4>lorem Ipsum</h4>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                <br /> <a href="#" class="mybutton">Click to Install</a>

            </div>
        </div>
    </div>
</div>
</div>


$('.topslidercell').contenthover({
effect: 'slide',
slide_speed: 300,
overlay_background: '#000',
overlay_opacity: 0.8
});

Answer 1

Add:

#container { text-align: center; }

and

#topgrid { display: inline-block; }

What it does:

Whenever using floats, all your content will float to that side. Making #topgrid inline-block makes it... well... a block element that acts like inline, meaning it will be affected by a parent text-align: center; . And it will be only as wide as the descendant content needs it to be.

Answer 2

Here's a little tip on debugging divs: add a border around the problem div to see where it is on the page

border: 1px solid red

This is the result: http://jsfiddle.net/uvb1u8y1/16/

You can see that the div you are trying to center is taking up the entire width of the parent container, so it is centered. To fix this, you must specify the width of the div

You can see here that it is now centered: http://jsfiddle.net/uvb1u8y1/18/

Another helpful little tool available in most browsers is if you press f12 you can open a DOM explorer and through this you will be able to select elements on the page and highlight them so you can have a visual representation of the space they take up. You can even add, remove, or change attributes of these elements to quickly get an idea of how you might be able to fix a problem you are having.