3D Sidebars

by Lachlan Arthur

HTML

<div id="wrapper">
    <div id="header">
        <h1>3D Sidebars</h1>
    </div>
    <div class="clearer"></div>
    <div id="sidebar_left">
        <h3>Pages</h3>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="sidebar_right">
        <h3>Search</h3>
        <input type="search" /><input type="button" value=">" />
        <h3>Categories</h3>
        <ul>
            <li><a href="#">Uncategorised</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Random</a></li>
            <li><a href="#">Funny</a></li>
            <li><a href="#">Product Update</a></li>
        </ul>
    </div>
    <div id="page">
        <h2>New page</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in ultricies mauris. Mauris blandit risus a odio condimentum a ullamcorper lectus auctor. Morbi faucibus sollicitudin viverra. Sed dignissim, turpis id feugiat hendrerit, risus nibh varius lorem, sit amet pellentesque mi turpis et orci. Aenean et arcu vitae massa consectetur varius. Aenean vel mi velit. Duis purus mauris, porta sed lacinia sed, suscipit ut augue. Nunc urna felis, eleifend quis feugiat at, venenatis at turpis. Nunc sit amet iaculis nibh. Praesent mauris nibh, vulputate a dignissim et, mattis sit amet mauris. Morbi posuere interdum ante. Aliquam at velit elit, a malesuada nulla.</p>
        <p>Aenean porttitor ultrices arcu, sit amet blandit elit interdum vel. Integer bibendum feugiat purus, non commodo risus viverra eu. Maecenas tempor, ante sit amet ornare scelerisque, elit lacus pulvinar turpis, id adipiscing libero erat quis turpis. Nam in neque a erat auctor ullamcorper sit amet vitae magna. Fusce a ligula et nunc sagittis posuere quis ut urna....

CSS

.clearer {
    clear: both;
}

#wrapper {
    width: 960px;
    margin: 0 auto;
}

#sidebar_left, #sidebar_right {
    width: 200px;
}

#sidebar_left {
    float: left;
    background: #555;
}

#sidebar_right {
    float: right;
    background: #555;
}

#page {
    background: #999;
    margin: 0 200px;
}