Bikesite HTML wireframe

by agib

HTML

<header>
</header>

<div id="filter-wrapper">
</div>

<div id="overview-wrapper">
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
        <div class="overview-item"></div>
</div>

<div id="product-wrapper">
</div>

CSS

body { padding-top: 80px; font-family: Arial, sans-serif; font-weight: bold; color: #333; text-transform: uppercase; }
header, #product-wrapper, #filter-wrapper { position:fixed; }
header { top: 0; width: 100%; height: 60px; background-color: #444; }
#product-wrapper, #filter-wrapper, .overview-item { background-color: #DEDEDE; }
#filter-wrapper { left: 1%; width: 12%; height: 900px; }
#product-wrapper { height:760px; width: 56%; margin-left: 40%;  }
#overview-wrapper { width: 26%;  margin-left: 14.5%; }
.overview-item { width: 42%; height: 140px; margin: 0 20px 20px 0;  float:left;  }