user4756836 user4756836 - 2 months ago 6
CSS Question

Have status bar's height to be 100%

I am trying to get the status bar's height to be 100% of the container. I tried giving it fixed height but even when the height increases... the text on the new line appears below the status bar rather than beside it.

Code:



.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding: 20px;
display: inline-block;
height: 100%;
}

<div class="list">
<span class="status-bar">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>





JSFiddle Demo

Answer

I recommend to go with flexbox, it will give you more flexibility and control of the layout.

.list {
  padding: 0;
  border: 1px #666666 solid;
  width: 250px;
  display: flex;
}
.list .status-bar {
  background-color: red;
  width: 20px;
  padding: 20px;
}
.list .status-text {
  flex: 1;
}
<div class="list">
  <div class="status-bar"></div>
  <div class="status-text">Test 1 Test 1Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1</div>
</div>
  

With vertically centered text

.list {
  padding: 0;
  border: 1px #666666 solid;
  width: 250px;
  display: flex;
}
.list .status-bar {
  background-color: red;
  width: 20px;
  padding: 40px 20px;
}
.list .status-text {
  flex: 1;
  display: flex;
  align-items: center;
}
<div class="list">
  <div class="status-bar"></div>
  <div class="status-text">Test 1 Test 1</div>
</div>

Comments