Christopher Warmbold Christopher Warmbold - 1 year ago 93
HTML Question

Set width of child to parents width including border

How can I set the width and the alignment of the

class to match the width of its parent?

Possible solutions would be:

  • set
    box-sizing: content-box
    left: -1px
    (border size)

  • set
    left: -1px
    right: -1px

But I think these solutions are not perfect because you have to know the border-size of the parent and/or you have to work with
box-sizing: content-box
but i want to avoid this.

Furthermore I canĀ“t just change the DOM hierarchy because I want to restyle elements which are generated by a JS-framework

Do you know any better solutions?

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

border: 1px solid black;
width: 50%;
position: relative;

position: absolute;
top: 100%;
left: 0px;
width: 100%;
border: 1px solid black;
// box-sizing: content-box;
// left: -1px;

<div class="outer">
<div class="inner">Inner</div>

Answer Source

One option might be to use the css3 outline property, which can function similarly to border, but does not add width to the element.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download