JBS Layout test

by cristianromagnoli

HTML

<div class="wrp clearfix no-menu">
    <header class="hdr clearfix">
        <ul class="h-menu">
            <li>h-menu</li>
            <li>h-menu</li>
            <li>h-menu</li>
            <li>h-menu</li>
            <li>h-menu</li>
        </ul>
    </header>
    <div class="clearfix">
        <div class="v-carpet">
            <img src="http://oklahomafarmreport.com/wire/news/2010/03/media/03383_JBS_logo.jpg" alt="JBS" />
            <ul class="v-menu">
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
            </ul>
        </div>
        <section class="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content...

CSS

*{margin:0;}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size:0;
}
.wrp{background:#797979; width: 600px; margin: 0 auto; font-family: arial, sans-serif; font-size:13px;}
.hdr{position: relative; background-color:#333; padding: 10px}
.foot{padding: 10px}
.v-carpet{background: #fff; margin: 0 0 0 10px; padding: 10px; width: 100px; float:left; margin-top:-36px; position: relative}
.v-carpet img{width:100px}
.v-menu{list-style:none; margin: 0; padding: 0;}
.h-menu{float: right; color: #fff;}
.h-menu li{display: inline;}
.content{background: #fff; width: 440px; float: right; padding:10px;}
.no-menu{}