<body>

  <div id="wrapper">
    <div id="content">


      <div id="main">

        <div class="listings">

          <div class="scroller">
            <div class="listing">
              <div class="newsHead">NEWS &amp; UPDATES</div>
              <span class="newsDate">Thursday – March 3, 2016</span>
              <span class="newsTitle">Baker, Mayo, and Schultz victorious at California State Championships!</span>
              <span class="newsPara">Coyote Hobbies, located in California's high desert town of Victorville, hosted the 2016 California State Championships. The race attracted over ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Wednesday – March 2, 2016</span>
              <span class="newsTitle">New! Shock Shafts and FT Aluminum Steering Bellcrank Posts</span>
              <span class="newsPara">FT Aluminum Steering Bellcrank Posts for the RC8B3, 8B3e and RC8T3, 8T3e These lightweight aluminum Steering Bellcrank Posts will shave ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Tuesday – March 1, 2016</span>
              <span class="newsTitle">Chad Due Short Course Motorama Champion</span>
              <span class="newsPara">Motorama 2016, held in Harrisburg, PA, is a unique event incorporating several forms of racing, giving the RC community an ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Tuesday – March 1, 2016</span>
              <span class="newsTitle">In Stock and Shipping - Kicker KPw Bluetooth Speakers</span>
              <span class="newsPara">RC10.com Exclusive - New Lower Price! On-the-go Portable Wireless Speaker to stream your favorite music in any location. The KICKER ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Tuesday – March 1, 2016</span>
              <span class="newsTitle">In Stock and Shipping - ESS-ONE+ Engine Sound System</span>
              <span class="newsPara">The ESS-ONE+ Engine Sound System lets you choose from multiple throaty race engine sounds, shifting, brakes, and turbo blowoff valves! ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Tuesday – March 1, 2016</span>
              <span class="newsTitle">Upcoming Team Races, March - May 2016</span>
              <span class="newsPara">Check out these races where the Team will participate - and come and watch your favorite drivers! March 2016 ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Friday – February 26, 2016</span>
              <span class="newsTitle">NEW! Team Associated Lite and Winter Jackets!</span>
              <span class="newsPara">Available through RC10.com only AE Lite Jacket The NEW AE Lite Jacket is a lightweight, water-repellent jacket that offers just ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Thursday – February 25, 2016</span>
              <span class="newsTitle">Cavalieri Leads RC8B3 to Dirt Nitro Challenge Victory Lane</span>
              <span class="newsPara">The Dirt Nitro Challenge is one of the most popular events on the calendar and kicks off the major 1:8 ...</span>
            </div>
            <div class="listing">
              <span class="newsDate">Tuesday – February 23, 2016</span>
              <span class="newsTitle">Futaba RX Charge Lead</span>
              <span class="newsPara">Reedy's new RX/TX charge lead for batteries equipped with FUT plugs works perfectly with Reedy chargers #27200 1216-C2 Dual AC/DC ...</span>
            </div>
          </div>
        </div>
        <!-- jpg buttons are 211 x 237px each -->
        <div class="buttons">
          <img class="departments" src="https://www.teamassociated.com/images/category_buttons/parts_and_accessories.jpg" alt="" title="">
          <img class="departments" src="https://www.teamassociated.com/images/category_buttons/parts_and_accessories.jpg" alt="" title="">
          <img class="departments" src="https://www.teamassociated.com/images/category_buttons/parts_and_accessories.jpg" alt="" title="">
          <img class="departments" src="https://www.teamassociated.com/images/category_buttons/parts_and_accessories.jpg" alt="" title="">
          <img class="departments" src="https://www.teamassociated.com/images/category_buttons/parts_and_accessories.jpg" alt="" title="">
          <img class="departments" src="https://www.teamassociated.com/images/category_buttons/parts_and_accessories.jpg" alt="" title="">
        </div>
      </div>


    </div>
  </div>
  <!-- wrapper -->
</body>
    html {
        margin:0; padding:0;
        background-color: black;
        background-size: cover;
        background-position: top left;
        background-repeat: no-repeat;
    }
    div, p {
        font-family: 'Arial', sans-serif;
	margin: 0;
        color: white;
    }
    img {
        border: 0;
        
    }
    #wrapper {
        width: 100%;
        margin: 0 auto;
    }
    #content {
        margin:0; padding:0;
        background-color: black;
        width: 100%; max-width: 900px;
    }
    
    #main {
        display:flex;
        flex-direction:row;
      position:relative;
        }


    .listings { 
        order: 1;
        display:flex;
        flex-direction:column;
        width: 270px;
      min-width:170px;
    }
    .scroller { 
    	position: absolute;
    	left:1px;
    	top:1px;
    	bottom:1px;
    	padding:1px;
      width:22%;
      max-width:195px;
      min-width:170px; 
    	overflow:auto;
    }
    .listing {
        border-left: 4px black solid;
        background-color: #222;
        padding: 2px;
        float: left;
    }
    .newsHead {
        font-size: 1em;
        font-weight: 900;
        font-stretch: condensed;
        padding-bottom: 5px;
        padding-left: 5px;
    }
    .newsDate {
        font-size: x-small;
        font-style: italic;
    }
    .newsTitle {
        float:left;
        font-size: .8em;
        font-weight: 900;
        font-stretch: condensed;
        text-height: x-small;
    }
    .newsPara {
        float:left;
        font-size: x-small;
        padding-bottom: 3px;
        border-bottom: 4px black solid;
    }
    
    .buttons {
        order: 2;
        text-align: center;
    }
    .departments { 
        width: 30%;
    }
        
    /* ::::::::::::::: RESPONSIVE :::::::::::::::::: */
 


    @media screen and (max-width:3000px) {
        #wrapper {width: 900px;}
    }
    
    @media screen and (max-width:900px) {
        #wrapper {width: 100%;} 
        .scroller  {
            overflow: auto;
        }
    }

    @media screen and (max-width:640px) {
        .departments {
            width: 48%;
        }
    }
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.