inline-block not displaying inline

Question

Hi, I'm currently trying to replicate this free template to work on my HTML/CSS skills https://www.freewebsitetemplates.com/preview/treepreservation/index.html

I'm having a hard time with the Top Programs section. No matter what I do, no matter how much I shrink them, my two divs (planting trees and paper recycling) won't stay on the same line. Where is the problem ???

Here's a screenshot of my own work :

http://image.noelshack.com/fichiers/2015/33/1439384133-title.png

And here's my code :

<head>
    <meta charset="utf-8">
    <title>World Tree Preservation Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- HEADER -->

    <header>
        <div class="wrapper">
            <a href="index.html"> <img src="images/logo.png" alt="World Tree Preservation logo" title="WTP Logo"> </a>
            <nav>
                <ul id="nav-links">
                    <li><a href="#" class="selected">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Our Programs</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- SAVE THE FUTURE -->

    <div id="save-the-future">
        <div class="wrapper">
            <p>as the saying goes.. <br/>
            you don't know what you've got. <br/>
            'till it's gone.</p>

            <h2>plant a tree. <br/><br/>
            grow a tree. <br/><br/>
            <span>save the future.</span> </h2>
        </div>
    </div>

    <!-- MAIN CONTENT -->

    <section class="wrapper">
        <div class="petitesection flechage">
            <a href="#"><img src="images/help-out.jpg" alt="help out"></a>
            <p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. </p>
        </div>
        <div class="petitesection flechage">
            <a href="#"><img src="images/what-we-do.jpg" alt="what we do"></a>
            <p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
        </div>
    </section>

    <!-- PROGRAMS AND BLOG POSTS, SECONDARY CONTENT -->

    <section class="wrapper">
        <div class="petitesection" id="secondary">
            <a href="#" id="programs">top programs</a>
            <div class="treeandpaper">
                <a href="#" class="treeandpaperlinks" id="treeplanting">tree planting</a>
                <p>If you're having problem editing this website template.</p>
            </div>
            <div class="treeandpaper">
                <a href="#" class="treeandpaperlinks" id="paperrecycling">paper recycling</a>
                <p>Then don't hesitate to ask for help on the.</p>              
            </div>
        </div>

        <div class="petitesection">
            <a href="#">recent blog posts</a>
            <div class="title">
                <img src="images/blog-post1.jpg" alt="blog post 1">
                <a href="#">blog post title one</a>
                <p>You're free to use this website template without linking back to us.If you're having problems editing this website template, then don't hesitate to ask for help on the Forums...</p>
            </div>

            <div class="title">
                <img src="images/blog-post2.jpg" alt="blog post 2">
                <a href="#">blog post title one</a>
                <p>You can do a lot with them. You can modify them. You can use them to design websites for clients, so long as you agree with the Terms of Use. You can even remove all our...</p>
            </div>
        </div>
    </section>

    <!-- PRE-FOOTER -->

    <div id="pre-footer">

        <div id="contact">
            <h1>24h customer service</h1>
            <ul>
                <li>512 943 1069<br>
                512 943 1068</li>
                <li>email@email.com</li>
                <li>1341 Oakmound Drive<br>
                Chicago, IL 60609 </li>
            </ul>
        </div>

        <div id="tweets">
            <h1>recent tweets</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla elementum magna. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
        </div>

        <div id="social-medias">
            <h1>get in touch with us</h1>
            <ul>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Google +</a></li>
            </ul>
        </div>

    </div>

    <!-- FOOTER -->

    <footer>
        <nav>
            <ul id="bottom-nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Our Programs</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
        <p>&copy WORLD TREE PRESERVATION. ALL RIGHTS RESERVED</p>
    </footer>

</body>

</html>

/***** General *****/

body {
    margin: 0;
    background-image: url('../images/bg-body.jpg');
}

.petitesection {
    width: 48.5%;
    margin: 0 auto;
    float: left;
    color: #858892;
    margin: 0 0.75%;
    font-family: quattrocento_sansregular;
    font-size: 14.1px;
}

#pre-footer, footer {
    clear: both;
}

@font-face {
    font-family: 'quattrocento_sansregular';
    src: url('../fonts/quattrocentosans-regular-webfont.eot');
    src: url('../fonts/quattrocentosans-regular-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/quattrocentosans-regular-webfont.woff') format('woff'),  url('../fonts/quattrocentosans-regular-webfont.ttf') format('truetype'),  url('../fonts/quattrocentosans-regular-webfont.svg#quattrocento_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rokkittbold';
    src: url('../fonts/rokkitt-bold-webfont.eot');
    src: url('../fonts/rokkitt-bold-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/rokkitt-bold-webfont.woff') format('woff'),  url('../fonts/rokkitt-bold-webfont.ttf') format('truetype'),  url('../fonts/rokkitt-bold-webfont.svg#rokkittbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rokkittregular';
    src: url('../fonts/rokkitt-regular-webfont.eot');
    src: url('../fonts/rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/rokkitt-regular-webfont.woff') format('woff'),  url('../fonts/rokkitt-regular-webfont.ttf') format('truetype'),  url('../fonts/rokkitt-regular-webfont.svg#rokkittregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*****  Centrage *****/

.wrapper {
    width: 960px;
    margin: 0 auto;
}

/***** Header *****/

a img {
    padding-top: 45px;
}

header {
    height: 125px;
    box-shadow: inset 0 -2px 6px -1px rgba(0,0,0,0.2);
    background-image: url('../images/bg-header.jpg');
}

nav {
    float: right;
    padding-top: 80px;
}

#nav-links {
    width: 100%;
    margin: 0;
    padding: 0;
}

#nav-links li {
    display: inline-block;
    list-style-type: none;
    padding-left: 30px;
}

#nav-links li a {
    text-decoration: none;
    color: white;
    text-shadow: 0 3px 3px black;
    font-family: rokkittbold;
}

#nav-links li a.selected {
    color: #fef500;
}

#nav-links li a:hover{
    color: #fef500;
}

/***** Save the future *****/

#save-the-future {
    text-transform: capitalize;
    height: 396px;
    background:url(../images/bg-featured.png) repeat-x;
}

#save-the-future .wrapper {
    background:url(../images/bg-featured.jpg) no-repeat;
    height:396px;
}

#save-the-future p{
    color: white;
    line-height: 30px;
    margin: 0 0 0 78px;
    padding: 32px 0 0;
    text-shadow: 0 1px 1px rgb(0,0,0);
    font-family:rokkittregular;
    font-size:24px;
}

#save-the-future h2 {
    color: white;
    font-family:rokkittbold;
    font-size: 36px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 0 78px;
    padding: 28px 0 0;
    text-shadow: 0 1px 1px rgb(0,0,0);
}

#save-the-future h2 span {
    color: #fef500;
    font-size: 3rem;
    line-height: 28px;
}

/***** Main content *****/

.flechage img {
    padding: 0;
    width: 100%;
}

.petitessection a:hover {
    background-color: rgba(255,255,255,0.2);
}

.petitesection p {
    padding-bottom: 32px;
}

.flechage {
    background: url('../images/arrow-gray.png') bottom repeat-x;
}

/***** Programs *****/

.treeandpaper {
    width: 210px;
}

#secondary {
    margin-top: 25px;
}

#programs {
    text-transform: uppercase;
    font-size: 20px;
    padding-bottom: 30px;
    color: #404040;
    font-family: rokkittbold;
    text-decoration: none;
    margin-bottom: 15px;
}

.treeandpaperlinks {
    text-transform: uppercase;
    font-size: 15px;
    text-decoration: none;
    color: #858892;
    display: block;
    width: 210px;
    height: 170px;
    padding-top: 160px;
    box-sizing: padding-box;
    margin-top: 15px;
    background-size: 100%;
}

#treeplanting {
    background: url('../images/top-program1.jpg') no-repeat center top;
}

#paperrecycling {
    background: url('../images/top-program2.jpg') no-repeat center top;
}

Thanks for the help :)

Answer 1 · 2015-08-12T13:10:07Z

August 12, 2015 1:10pm

That's because you didn't make them inline-block.

Try this:

treeplanting {

background: url('../images/top-program1.jpg') no-repeat center top;
display: inline-block;

}

paperrecycling {

background: url('../images/top-program2.jpg') no-repeat center top;
display: inline-block;

}

Block elements will naturally behave as block elements unless you specifically override this with CSS code. Then they can become inline-block, which means they are inline relative to each other, but block relative to other elements.

Is this what you are trying to accomplish?

Answer 2 · 2015-08-12T13:54:06Z

August 12, 2015 1:54pm

Sorry, I posted the wrong code and screenshot lol

Actually I made them inline block but then the first section went on the same line than my TREE PLANTING link...

I'll edit the code and screenshot as soon as I am home, but maybe someone can see what my problem is ?

Answer 3 · 2015-08-12T15:36:06Z

August 12, 2015 3:36pm

Have you try using !important yet?

I don't know much about this . I am quite noob here.

just guessing but it worth try sir ;)

Welcome to the Treehouse Community

Looking to learn something new?

Jeremy Diallo

Jeremy Diallo

inline-block not displaying inline

3 Answers

Eric Conklin

Eric Conklin

treeplanting {

paperrecycling {

Jeremy Diallo

Jeremy Diallo

Juthawong Naisanguansee

Juthawong Naisanguansee