CODEWITHSUNDEEP
htmlcss
user1101
user1101

Reputation: 51

Percentage with borders

There is a way to make .teste with 100% width (150px)?

<div class='debug'>
    <div class='debug'>
        <div class='teste'>Hello world!</div>
    </div>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

.debug {
    min-height: 100px;
    width: 150px;
    border: 1px solid red;
}

.teste {
  /* width: 150px; */
}

http://jsfiddle.net/yxbwv62L/

The computed size is 148px. Why isn't it 150px?

Upvotes: 0

Views: 41

Answers (2)

cocoa
cocoa

Reputation: 3921

That's because you are using box-sizing: border-box. That makes it so .debug width stays at 150px and has the border go inside the div. So the remaining width for .teste is only 148px. If you want to keep both widths at 150px then you can switch around the properties like this: 

.debug {
  width: 150px;
}

.teste {
  width: 100%;
  min-height: 100px;
  border: 1px solid red;
}

fiddle

Upvotes: 1

Will
Will

Reputation: 20235

Give .teste a negative left and right margin of the border-size (1px in this case).

.teste {
  margin-left: -1px;
  margin-right: -1px;
}

Upvotes: 0

Related Questions