Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jeremy Cornwell
Jeremy Cornwell
11,106 Points

CSS centering three divs without floats?

The following is the code I'm trying to use to get a the three .feature-icon divs to center inside it's parent. I've been flipping back and forth so much I'm not thoroughly confused as to what was supposed to be the best practice. Are you supposed to not use floats or use them?

<div class="greybox clearfix">
        <div class="icon-container">
            <div class="feature-icon">
                <img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/commercial.png" style="height:128px;width:128px">
                <p>Commercial</p>
            </div>
            <div class="feature-icon">
                <img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/industrial.png" style="height:128px;width:128px">
                <p>Industrial</p>
            </div>
            <div class="feature-icon">
                <img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/information.png" style="height:128px;width:128px">
                <p>More Information</p>
            </div>
       </div>
    </div>

.greybox {
    width: 100%;
    background-color: #a99e93;
    padding: 0 5%;
    margin: 0 auto 1rem;
}
.icon-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.feature-icon {
    width: 25%;
    padding-left: 5%;
    float: left;
    padding-top: 2em;
    padding-bottom: 2em;

}

.feature-icon img {
    margin: 0 auto;
}

.feature-icon p {
    font-size: 1.2rem;
    color: white;

    padding-top: .8em;
}

1 Answer

Kevin Korte
Kevin Korte
28,149 Points

There is nothing wrong with using floats to do this. Eventually, Flexbox will do this for you.