media panel

by John Allan

HTML

<ul>
<li class="mediaItem">
    <div class="mediaItem-media"><img class="eightypx" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Yokohama_Municipal_Subway_Logo.svg/80px-Yokohama_Municipal_Subway_Logo.svg.png" /></div>
    <div class="mediaItem-body">dddddddddddddddddddddddddddddddddddddddddddddddddddddlah blah blahblah blah blahblah blah blah blah blah blahlah blah blah</div>
</li>
<li class="mediaItem mediaItem-right">
    <button class="mediaItem-media" >Press Me No Matter what I Say to you</button>
    <div class="mediaItem-body">dddddddddddddddddddddddddddddddddddddddddddddddddddddlah blah blahblah blah blahblah blah blah blah blah blahlah blah blah</div>
</li>
</ul>

CSS

.mediaItem, .mediaItem-body{
    overflow:hidden;
    _overflow:visible;
    zoom:1; 
    word-wrap:break-word
}

.mediaItem .mediaItem-media img, 
.mediaItem img.mediaItem-media{
    display: block;
}

.mediaItem .mediaItem-media{
    float:left; 
    margin-right: 10px;
}
.mediaItem.mediaItem-right .mediaItem-media{
    float:right; 
    margin-left: 10px; 
    margin-right:0;
}

//demo only

ul{ 
    width: 450px; 
}
li{ 
    border:1px solid black; 
    margin-bottom:10px;
}

.button{ 
    font-size: 11px; 
    color: white; 
    background: black; 
    padding: 5px 10px; 
    border-radius: 30px; 
}

.eightypx { 
    max-width:80px; 
}