CODEWITHSUNDEEP
htmlcss
SergeantPenguin
SergeantPenguin

Reputation: 873

Percentage width of absolutely positioned element

From CSS 10.2;

Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1. Note: For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element.

I find it rather odd that the percentage is calculated differently depending on whether the element is positioned absolutely or not. I'm pretty new to CSS however, so I'm guessing there's good reason for it. However is there any way to return the width calculation to be with respect to the containing block as opposed to the padding, without changing position: absolute in the child element? Currently I have width:100% in an absolutely positioned child element and this little nuance is tripping me up with layout, very similar to this jsfiddle demonstration:

Upvotes: 4

Views: 3400

Answers (2)

Asons
Asons

Reputation: 87191

Here is one that has both a right padding and a right margin, use the one you need.

If you want to fill the region's parent width, set the right to 0 (right: 0;)

*{
  border: 2px solid red;
}

html {
  height: 50%;
  border: 2px dashed yellow;
}

body {
  margin: 60px;
  height: 100%;
  width: 50%;
  padding-right: 50px;
  position:relative;
  background: #666;
  color: #aaa;
}

.region{
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  padding-right: 40px;
  border: 2px dashed white;
  text-align: right;
}
<div class="region">hello</div>

Upvotes: 1

user4994625
user4994625

Reputation:

Is not possible but you can do a little trick, remove the width:100% add right:0 and left:200px→ the value of the padding of the parent:

*{
  border: 2px solid red;
}

html {
  height: 50%;
  border: 2px dashed yellow;
}

body {
  margin: 60px;
  height: 100%;
  width: 50%;
  padding-left: 200px;
  position:relative;
  background: #000;
  color: #aaa;
}


.region{
  position: absolute;
  top: 0;
  left:200px;
  right:0;
  border: 2px dashed white;
}
<body>
  <div class="region">hello</div>
</body>

Upvotes: 2

Related Questions