Display three blocks inline 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!

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

please add float:left to each and then check it work for you or not — priya786, Jun 01 '15 at 07:31
Could you create a demo with your HTML and CSS please, that was we can have a look at what is going on. — Ruddy, Jun 01 '15 at 07:46
@priya786, it works for now, thanks! but I cant get why it doesnt work when I try this at the begining of process... since you give me proper answet first, you can post answer and I will accept it.. — nowiko, Jun 01 '15 at 08:36

score 1 · Accepted Answer · answered Jun 01 '15 at 09:47

#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

score 0 · Answer 2 · answered Jun 01 '15 at 07:47

0

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/

answered Jun 01 '15 at 07:47

Felix A J

6,300
2
27
46

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

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;

edited May 23 '17 at 11:52

Community

1
1

answered Jun 01 '15 at 08:06

Karthi Keyan

804
6
18

score 0 · Answer 4 · answered Jun 01 '15 at 08:24

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;
}

Display three blocks inline CSS

4 Answers4