显示三个块的内联CSS

Question

I have three div 's, #left_sidebar , #records_list and #right_sidebar , I want to display them inline, but when I using display:inline-block , all seems to be fine but sidebars placing on the bootom of page, then I try to use float , but still getting some creppy behavior, then I do 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 from float 's and display ), and all works fine, so can somebody explain me, if it right? Or I need do this somehow else? Thanks!

PS If you need more info, or it a little bit unclearly what I am asking just say, and I will try to improve question.

Answer 1

 #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 now check this

Answer 2

Since all the three div have fixed width, you need a wrapping div width fixed width.

And gave float:left instead of inline-block

Check the fiddle - https://jsfiddle.net/afelixj/racnob3f/

Answer 3

I know you know about the concepts of float, i think you need more clarification, There is a good discussion about the float, inline, inline-block here please refer float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 4

give float left to all blokes, float means that they will become inline and they will displayed one after another if you want to add space between them with margin

make changes like this:

#left_sidebar {
width: 142px;
float: left;
}

#records_list {
width: 530px;
float: left;
}

#right_sidebar {
background-image: url('../images/enstein_banner.png');
width: 174px;
height: 231px;   
float: left;
}