Создание горизонтальной компоновки, аналогичной WrapPanel WPF (Webdesign)

Это то, что я хотел бы (макет Photoshop, основанный на изображении выше):

Чтобы понять и разобраться, вот мой код

My HTML Layout & Code

• div#wrap: takes the complete width of my browser window
• div#newswrap: inside #wrap, very large width to host my news items, horizontal scroll bar

• div.post: a single post, with fixed width

  
  
     
  
      
  Lorem Ipsum Dolor
      
  Lorem ipsum *text text*
     
  
     
  
      
  Lorem Ipsum Dolor
      
  Lorem ipsum *text text*
     
  
  
  

И CSS:

    #wrap
    {
    width:100%;
    height:500px;
    background-color: rgba(0,0,0,0.5);
    overflow:scroll;
    overflow-y:hidden;
    }

    #newswrap
    {
    width:2500px;
    height:500px;
    }


    .post
    {
    width: 300px;
    float: left;
    /* display:inline-block; */
    background: rgba(0,0,120,0.5);
    padding: 10px;
    margin: 30px 0px 30px 30px; 
    }

Я попытался использовать display: inline-block, но он тоже не работал. Выглядит довольно легко, но я не могу найти способ сделать это. Некоторая помощь будет принята с благодарностью.

Additional Question Can I capture the scroll event with jQuery/JS so the newswrap scrolls when I scroll down? I tried using the $("#").mousewheel function but it didn't seem to scroll (though it did trigger the event when tested with an alert)