sideScroll

fixed header Scrolling results

by Dan Wright

HTML

<div id="content">
    <div class="test">
        <div class="banner"></div>
        <div id="serach_results">
            <div class="resultsView">
                <div class="search-header">
                    <div class="section-title">Title</div>
                    <div class="search-results-header">Products / Desc / etc</div>
                </div>
                <div class="results">
                    <div class="scrolling">
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result...

CSS

body { /* Do not use */ margin: 0; padding: 0; }
#content { /* Do not use */ }
.test { /* Content Wrapper */ }
.banner { /* Do not use */ }
#search_results { /* Results View Outer Wrapper */ }
.resultsView { /* Results View Inner Wrapper */ }
.search-header { /* Do not use */ }
.section-title { /* Do not use */ height: 75px; background-color: green; }
.search-results-header { /* Do not use */ background-color: pink; }
.results { /* Results Wrapper */ }
.scrolling { /* Results Scroll Wrapper */ }

/* Search result stylings */
 .result1, .result3 { background-color: yellow; }
.result2, .result4 { background-color: orange; }