How to display images inline

Question

I have a navigation div with three images. Each image has a title element absolutely positioned at the bottom of the picture. I am trying to display all three of the images adjacent to each other on the same line but the pictures are displayed as blocks.

HTML:

<div class = "nav">
    <div class = "container">

        <div class = "image">
            <img src = "img1"> 
        </div>
        <div class = "title">
            <p> text1 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img2"> 
        </div>
        <div class = "title">
            <p> text2 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img3"> 
        </div>
        <div class = "title">
            <p> text3 </p>
        </div>

    </div>
</div> 

CSS:

.nav {
    display: inline;
}

.container {
    position: relative;
    width: 100%;
}

.image img {
    width: 30%;
    height: 4.5in;
}

.title {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}

Solution 1

You will need to fix your HTML code first.

it is <div class = "title"> and not <div class = "title> Missing the " at the end of each of your title.

then add float to your container and put a width of 30%. Because you want your Image to be 30% width right.

.container {
    float:left;
    position: relative;
    width: 30%;
}

As you put 3 time container, you are asking 100% X 3 to be aligned,

also create a image class in your CSS with float in it.

.image{
    float:left;
}

And to conclude, change the width of your .image img in your CSS for 100% that way it will take the 100% place of the 30% container allowed.

    .image img {
    width: 100%;
    height: 4.5in;
    }

Solution 2

Your images are already set to inline, trouble is, their parent isn't. You'll need this:

container { display: inline-block }

It is worth noting that you have some markup you probably don't really need

    <div class = "title>
        <p> text3 </p>
    </div>

Could be replaced with this:

    <h1 class="title">text3</h1>

Or this:

.container h1 {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}

-snip-

    <h1>text3</h1>