CODEWITHSUNDEEP
htmlcss
user4756836
user4756836

Reputation: 1337

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

Upvotes: 2

Views: 281

Answers (4)

g1un
g1un

Reputation: 374

Quick decision:

.list {
  display: table;
}

.list > .status-bar {
  display: table-cell;
}

Your desired result: https://jsfiddle.net/1dkcjgua/2/

Upvotes: 1

Asons
Asons

Reputation: 87262

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>

Upvotes: 2

mhatch
mhatch

Reputation: 4605

This is happening because the text is longer than the width of your container. It is wrapping and going below your status bar. You can fix this by adding the CSS white-space: nowrap; to your .list class. 

.list {
  padding:0;
  border: 1px #666666 solid;
  width: 250px;
  white-space: nowrap; /* added */
}

.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>

The text will overflow to the right (which you may want to handle in some way - maybe overflow:hidden), but it does solve your question.

Upvotes: 1

kukkuz
kukkuz

Reputation: 42372

You can try this:

  1. Float the status-bar to the left to allow the text to wrap around it.

  2. Then apply clearfix for float by clearing the float using this:

    .list:after{
  clear: both;
  content: '';
  display: block;
}

Let me know your feedback on this. Thanks!

.list {
  padding:0;
  border: 1px #666666 solid;
  width: 250px;
}

.list > .status-bar {
  background-color: red;
  width: 20px;
  padding:20px;
  display: inline-block;
  height:100%;
  float: left;
}

.list:after{
  clear: both;
  content: '';
  display: block;
}
<div class="list">
  <span class="status-bar">&nbsp;</span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
  
</div>

Upvotes: 1

Related Questions