Правая колонка по высоте ровна левой

by Alexey Chuganov

HTML

<div class="wrap">
    <div class="left">
        <h3>Left Column</h3>
        <ul>
            <li>item_1</li>
            <li>item_2</li>
            <li>item_3</li>
            <li>item_4</li>
            <li>item_5</li>
            <li>item_6</li>
            <li>item_7</li>
            <li>item_8</li>
            <li>item_9</li>
        </ul>
    </div>
    <div class="right">
        <h3>Right Column</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quam dicta odit odio praesentium doloremque vero eius tempore unde vitae nisi rem ullam dolorem repellat dolore qui aperiam placeat sint.</p>
    </div>
</div>

CSS

.wrap {
    position: relative;
    width: 980px;
    margin: 0 auto;
    background: #bbb;
    padding: 30px;
}
.wrap:after {
    content: ' ';
    clear: both;
    display: table;
}

.left {
    float: left;
    width: 60%;
    background: #ccc;
    padding: 10px;
}
.right {
    position: absolute;
    width: 30%;
    top: 30px; right: 30px; bottom: 30px;
    padding: 10px;
    background: #fff url(http://subtlepatterns.com/patterns/restaurant_icons.png);
}