CODEWITHSUNDEEP
htmlcss
chris cozzens
chris cozzens

Reputation: 517

Child Div Not Taking Width Of Parent

I am having trouble getting my "content-row" class below to take the full width of the "panel-group-item" class. 

.panel-group-item {
  border-bottom: 1px solid #eee;
  padding: 6px 0px;
  border: 2px solid #73b2b2;
  margin: 10px;
}

.content-row {
  background-color: #ffffff;
  display: table-row;
  margin: 10px;
}

.content-row .content-row-quantity,
.content-row .content-row-remove {
  display: table-cell;
  padding-right: 0;
  text-align: center;
  width: 15%;
}

.content-row .content-row-pic {
  display: table-cell;
  text-align: center;
  width: 17%;
}

.content-row .content-row-title {
  display: table-cell;
  padding: 10px 8px 10px 10px;
}
<li class="panel-group-item">
  <div class="content-row">
    <div class="content-row-quantity"></div>
    <div class="content-row-pic"></div>
    <div class="content-row-title"></div>
    <div class="content-row-remove "></div>
  </div>
</li>

Upvotes: 1

Views: 5736

Answers (3)

Johannes
Johannes

Reputation: 67738

A table-row without a table doesn't work well, so give that .content-row element display: table; and define its width (a table isn't 100% by default). Note the width setting calc(100% - 20px), which includes the margin in the 100% width.

.panel-group-item {
  border-bottom: 1px solid #eee;
  padding: 6px 0px;
  border: 2px solid #73b2b2;
  margin: 10px;
}

.content-row {
  background-color: #ddd;
  width: calc(100% - 20px);
  display: table;
  margin: 10px;
}

.content-row .content-row-quantity,
.content-row .content-row-remove {
  display: table-cell;
  padding-right: 0;
  text-align: center;
  width: 15%;
}

.content-row .content-row-pic {
  display: table-cell;
  text-align: center;
  width: 17%;
}

.content-row .content-row-title {
  display: table-cell;
  padding: 10px 8px 10px 10px;
}
<li class="panel-group-item">
  <div class="content-row">
    <div class="content-row-quantity">1</div>
    <div class="content-row-pic">2</div>
    <div class="content-row-title">3</div>
    <div class="content-row-remove ">4</div>
  </div>
</li>

Upvotes: 0

Brett
Brett

Reputation: 20049

It's probably because you don't have a display setting of display: table; on the parent element panel-group-item.

The table row will naturally go to 100% width of the table, but since you have no display: table set it's not doing that.

So I suggest doing these changes:

.panel-group-item {
    display: table;
    width: 100%;
    ......
}

That should do it!

Upvotes: 2

Tutch
Tutch

Reputation: 289

If you are going to use display:table-row, it should be either inside a table or have an outer element with display:table.

Take a look at this question, it's the same issue you are having right now I believe.

Upvotes: 1

Related Questions