Why do I see two rows rather than one?

Question

In the code below (fiddle here: https://jsfiddle.net/tno3n3cq/), I expect to see a single row with two columns. Instead I see two rows.

I expect to see a single row because:

the left side and right side elements are display: inline-block, so they should not be placed on their own line.
the widths of the two sides add up to the width of the container, so they should both fit on one line.

Where is my reasoning wrong?

* {
  box-sizing: border-box;
}

.filelist {
  width: 500px;
}

.bem-file {
  height: 37px;
}

.bem-left-side {
  width: 300px;
  display: inline-block;
}
    
.bem-right-side {
  width: 200px;
  display: inline-block;
}

<div class="filelist">
  <div class="bem-file">
    <div class="bem-left-side">
      left
    </div>
    <div class="bem-right-side">
      right
    </div>
  </div>
</div>

See https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Nenad Vracar, Jul 26 '17 at 14:11
Because you have a parent div smaller (550px) then your columns (300px each) — Luís P. A., Jul 26 '17 at 14:14

score 0 · Answer 1 · answered Jul 26 '17 at 14:13

Try this code, you're missing display: inline property for class filelist

.filelist {
  width: 500px;
  display: inline;
}

* {
    box-sizing: border-box;
}

.bem-file {
    height: 37px;
}

.bem-left-side {
    width: 300px;
    display: inline-block;
}

.bem-right-side {
    width: 200px;
    display: inline-block;
}
.bem-file-name {
    display: inline;
}
.bem-upload-progress {

}

.alert-icon {
  color: red;
}

/* wuh? this is \e999 in the global icon demo. Did we get an old version? */
.alert-icon:before {
  content: "\e99b";
  color: #d37d7d;
}

<div  class="filelist">
  <div  class="bem-file bem-file-error">
    <div  class="bem-left-side">
      <span  class="alert-icon"></span> 
      <div  class="bem-file-name">ripgrep-0.5.2-x86_64-apple-darwin.tar</div>
    </div>
    <div  class="bem-right-side">
      <span  class="status-message">File type invalid</span>
      <span  class="bem-upload-progress"></span>
      <span  aria-label="Remove" class="bem-remove-file bem-remove-file-error"></span>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 26 '17 at 14:17

Hope this helps

* {
    box-sizing: border-box;
}

.filelist {
  width: 500px;
}


.bem-file {
    height: 37px;
    width: 100%;
    background : red;
    position:absolute;
}

.bem-left-side {
    width: 300px;
    display: inline-block;
    background:yellow;
}

.bem-right-side {
    width: 200px;
    display: inline-block;
}

<div  class="filelist">
  <div  class="bem-file">
    <div  class="bem-left-side">
      left
    </div>
    <div  class="bem-right-side">
      right
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Jul 26 '17 at 14:22

0

You could remove the block declaration from your CSS of both the bem-left and bem-right.

answered Jul 26 '17 at 14:22

Sir Robert Casey

64
6

Why do I see two rows rather than one?

3 Answers3