Putting 2 images side by side

Question

I have a little bit of a problem here. I have 2 images that i need to put side by side on my timeline, but whatever I do the other one ends up under the first image(Image1). I tried putting style="float: right;" on the other image(Image2) but it only moves the second image to the right by a bit.

Here's my HTML code:

<div style="overflow:auto; padding: 2em; max-width: 1000px; max-height: 500px; background-color: rgb(182,0,0);" class="container">
<div class="timeline">
<div class="timeline-item">
<div class="year">2014<span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" /><br />   
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year">2013<span class="marker"><span class="dot"></span></span></div>
<div class="info"><img align="right" width="213" height="213" class="info" src="/Clients/019.jpg" style="border-style: none;" alt="Image1" />
<img align="right" width="213" height="213" class="info" alt="Image2" src="/Clients/281.jpg" style="border-style: none;" /><br />
<div style="text-align: center;">January 26 to 27 - Seminar &amp; Team Building @ SN David Apartelle</div></div></div></div></div></div>

Here's my CSS code:

    <style>
    div {
        font-family: Helvetica, Arial, sans-serif;
        box-sizing: border-box;
    }
    .timeline {
        width: 400px;
    }
    .timeline .timeline-item {
        width: 100%;
    }
    .timeline .timeline-item .info, .timeline .timeline-item .year {
        color: #E87474;
        display: block;
        float:left;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }
    .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
        color: #ccc;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }
    .timeline .timeline-item .year {
        font-size: 24px;
        font-weight: bold;
        width: 22%;
    }
    .timeline .timeline-item .info {
        width: 500px;
        width: 78%;
        margin-left: -2px;
        padding: 5px 0 40px 35px;
        border-left: 4px solid #FFE400;
        font-size: 16px;
        font-weight: bold;
        line-height: 20px;
    }
    .timeline .timeline-item .marker {
        background-color: #eee;
        border: 4px solid #FFE400;
        height: 20px;
        width: 20px;
        border-radius: 100px;
        display: block;
        float: right;
        margin-right: -14px;
        z-index: 2000;
        position: relative;
    }
    .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
        color: #ffffff;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }
    .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
        color: #FFE400;
    }
    .timeline .timeline-item .marker .dot {
        background-color: white;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
        display: block;
        border: 4px solid white;
        height: 12px;
        width: 12px;
        border-radius: 100px;
        float: right;
        z-index: 2000;
        position: relative;
    }
    .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
        background-color: #0F8DC7;
        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
    .info{
        transition: all 1s ease;
        opacity: 0.2;
        filter: alpha(opacity=20);
        display: inline-block;
        float: right;
        width: 50%;
    }
    .info:hover{
        transition: all 1s ease;
        position: relative;
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
</style>

Where did I go wrong with this? Hope to hear some answers ASAP. Thanks!

Answer 1

You gave your

.timeline {width: 400px;} 
.info {width:500px;width:78%}

then you are making images with width of 218px and adding them class .info,. which has width of 500px and 78% !, where 78% is gonna be applied.

How its gonna stay inside that parent container ? I created a fiddle. and gave your timeline class a border of 1px, to show the size of parent container.

Comment me what i'm missing here, then may help you.

JS Fiddle.

Answer 2

I tried to run your code and it shows side-by-side. I think its on your class that you defined. Try to check your css if you set the width on the divs then adjust the size and run your program again.

Answer 3

Sounds like your container isnt wide enough. Make sure the parent element(s) are at least 426px wide.

Also id suggest floating both your images left and adding a clearfix after them.

<div class="timeline-item">
<div class="year">2013<span class="marker"><span class="dot"></span></span></div>
<div class="info">
<img style="float:left;" width="213" height="213" alt="" class="info" style="border-style: none;" src="019.jpg" />
<img style="float:left;" width="213" height="213" class="info" style="border-style: none;" src="281.jpg" alt="" />
<div style="clear:both;" style="text-align: center;">CAPTION HERE</div>
</div>
</div>