WedsPage

by Pratik Bhonsle

HTML

<div id="page">
    <ol id="timeline clearfix">
        <!-- li>
            <div id="line11"></div>
            <div id="line12"></div>
        </li -->
        <li class="clearfix left ">
            <img src="http://placehold.it/100.png/09f/fff&text=Left1"/>
        </li>
        <li class="clearfix right ">
            <img src="http://placehold.it/100/09f/fff.png&text=Right1"/>
        </li>
    </ol>
</div>

CSS

body {
    background-color: #369369;
}
#page {
    width: 400px;
    margin: 0 auto;
    background-color: #fff;
    height: 1000px;
}
#timeline  {
    margin: 0;
    padding: 15px 0;
    position: relative;
    list-style: none;
}
#line1 {
    float: left;
    width: 5px;
    background-color: gold;
    height: 100%;
}
#line2 {
    float: left;
    width: 5px;
    background-color: silver;
    height: 100%;
}
img.left {
    clear: left;
    float: left;
    display: block;
    margin-bottom: 15px;
    position: relative;
}
img.right {
    clear: right;
    float: right;
    display: block;
    margin-bottom: 15px;
    position: relative;
}
.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    zoom: 1;
}