html - Display three blocks inline CSS -

i have 3 div's, #left_sidebar, #records_list , #right_sidebar, want display them inline, when using display:inline-block, seems fine sidebars placing on bootom of page, try use float, still getting creppy behavior, this:

#left_sidebar {     top: 0px;     width: 142px;     float: left; }  #records_list {     width: 530px;     display: inline-block; }  #right_sidebar {     background-image: url('../images/enstein_banner.png');     width: 174px;    height: 231px;       float: right; } 

(you see mix float's , display), , works fine, can explain me, if right? or need somehow else? thanks!

p.s. if need more info, or little bit unclearly asking say, , try improve question.

#left_sidebar {    width: 10%;    padding: 20px;    background: red;    float: left;    margin-right: 1%;    color: #fff;  }  #records_list {    width: 50%;    padding: 20px;    background: red;    float: left;    margin-right: 1%;    color: #fff;  }  #right_sidebar {    background-image: url('../images/enstein_banner.png');    width: 15%;    padding: 20px;    background: red;    height: 231px;    float: left;    color: #fff;  }

<div class="wrapper">    <div id="left_sidebar">left bar</div>    <div id="records_list">center part</div>    <div id="right_sidebar">right bar</div>  </div>

please check this