display: inline vs inline-block vs block for non-nav elements

Question

I am trying to make a horizontal list of three elements in the middle of the and am unsure which display property to use. I have tested them all and nothing changes them from vertical to horizontal.

To be specific, I am trying to replicate the 37signal's top page and I can't figure out how to line up the 3 divs.

http://37signals.com/

My markup looks like this:

<section class="imgContainer">
    <ul>
        <img src="logo-bc.png" alt="Basecamp">
        <li class="productTitle">Basecamp&copy;</li>
            <ul>
                <li class="productSubTitle">Manage Projects</li>
                <li class="productDescription">Used by millions for project management.</li>
            </ul>
        <img src="logo-hr.png" alt="Basecamp">
        <li class="productTitle">Highrise&copy;</li>
            <ul>
                <li class="productSubTitle">Manage Contacts</li>
                <li class="productDescription">Know the people you do business with.</li>
            </ul>
        <img src="logo-cf.png" alt="Basecamp">
        <li class="productTitle">Campfire&copy;</li>
            <ul>
                <li class="productSubTitle">Work in Real-Time</li>
                <li class="productDescription">Group chat rooms for your business.</li>
            </ul>
    </ul>
</section>

Edit: adding CSS as instructed:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 14, 2013 */

@font-face {
    font-family: 'crimson_textsemibold';
    src: url('crimsontext-semibold-webfont.eot');
    src: url('crimsontext-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('crimsontext-semibold-webfont.woff') format('woff'),
         url('crimsontext-semibold-webfont.ttf') format('truetype'),
         url('crimsontext-semibold-webfont.svg#crimson_textsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}


html {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h1, h2 {
    font-family: "crimson_textsemibold" /*"Crimson Text"*/,"CrimsonSemibold","Times New Roman",Georgia,serif;
}

body {
    set width: 80%;
    margin: 0 auto;
    text-align: center
}

nav ul li a {
    text-decoration: none;
}

header {
    
}

ul li {
    display: inline;
}

li.productTitle {
    font-size: 2em;
    padding-top: .2em;
}

li.productSubTitle {
    color: red;
    font-weight: bold;
    padding: .6em 0 1em 0;
}

New HTML:

<section id="imgContainer">
        <div class="mainContent">
            <img src="logo-bc.png" alt="Basecamp">
            <p>Basecamp</p>
            <p>Manage Projects</p>
            <p>Used by millions for project Management.</p>
        </div>
        <div class="mainContent">
            <img src="logo-hr.png" alt="Basecamp">
            <p>Highrise</p>
            <p>Manage Contacts</p>
            <p>Know the people you do business with.</p>
        <div class="mainContent">
            <img src="logo-cf.png" alt="Basecamp">
            <p>Campfire</p>
            <p>Work in Real-Time</p>
            <p>Group chat rooms for your business.</p>
        </div>
    </section>

New CSS:

#imgContainer {
    width: 600px;
    height: 1000px;
    background-color: blue;
    text-align: center;
    margin: 0 auto;
}

.mainContent {
    display: inline-block;
    width: 150px;
    height: 200px;
    background-color: green;
    margin-top: 50px;
}

I basically copied your code from the JSfiddle and I am getting a very weird effect -> http://gyazo.com/dfdded3b2304aec9eb1d00a82fef48fd

Answer 1

You want to give your container that is holding your elements text-align:center;

You're then going to want to give your inside elements: display:inline-block;

Here's an example I whipped up for you.

HTML:

<div id="container">
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
</div>

CSS:

#container{width:600px;height:1000px;background-color:blue;text-align:center;}
.element{width:150px;height:300px;background-color:red;display:inline-block;margin-top:50px}

Update: added images.

Answer 2

Always remember, inline is used to keep stuff side by side, inline-block is used to keep stuff side by side, but the containers would retain their block properties i.e they will possess a specific width and height unlike inline container whose width and height depends on their contents. block will never keep stuff side by side, it'll always be one below the other. these are basic rules of css, the more you play with it, the better you'll understand it :)