Fix the [x]!

Where am I?

by Rich Costello

HTML

<div id="wrapper">
    <div class="left">
        <ul>
            <li>Item 1 <span>x</span></li>
            <li>Item 2 <span>x</span></li>
            <li>Item 3 <span>x</span></li>
        </ul>
    </div>
    <div class="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum est eget justo pharetra quis tristique eros dictum. Aenean varius venenatis eros, non rhoncus erat dictum interdum. Aliquam nec mauris ac lacus tempus lobortis. Nullam ullamcorper euismod est non mollis.</p>
    </div>        
</div>

CSS

#wrapper {padding:20px;width:70%;background-color:#555;overflow:auto;color:#fff;font:13px Arial;}
.left {float:left;width:30%}
.right{float:right;width:40%; background-color:#666;padding:10px;border-radius:5px}

ul {margin:0;padding:0}
ul li {list-style:inside none;padding:5px;border-top:1px solid #666;}
li span {
    border: 1px dashed #444444;
    border-radius: 3px 3px 3px 3px;
    color: #CCCCCC;
    display: block;
    font-size: 11px;
    height: 15px;
    left: 90%;
    line-height: 15px;
    position: relative;
    text-align: center;
    top: -15px;
    width: 15px;
}


p {text-align:justify;margin:0}