List Items

by mgoetzke

HTML

<ul class="container">
    <li class="item">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div style="clear:both"></div>
    </li>
    <li class="item">
          <div class="item-content">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div style="clear:both"></div>
    </li>
    <li class="item">
        <img class="thumb left" src="http://lorempixel.com/120/120/fashion" >
            
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div style="clear:both"></div>
    </li>
   <li class="item">
       <div class="left">
           <img class="left thumb" src="http://lorempixel.com/120/120/technics" >
           <span  class="left">Left</span>
        </div>
        <div class="right">Right</div>
        <div style="clear:both"></div>
    </li>        
</ul>

CSS

.container {
    background-color:yellow;
    position:relative;
    display:block;
    width: 100%;
    list-style:none;
    padding:0px;
}


.item {
    background-color:rgba(0,0,0,0.1);
    display:block;
    position:relative;
    padding: 0.5em;
    height:100%;
    border: 1px solid black; 
    border-radius: 1px;
    margin: 0 0 20px 0;
}

.thumb {
    width:80px;
    height:80px;
    border-radius:3px;
    border: 1px solid white;
    margin-right: 0.5em;
   
}
.left {
    float: left;
    background: lightgray; 
}


.right
{
    float: right;
    background: lightblue;
}