Force Absolute Div to Listen to Parent's Padding

Force absolute div to listen to parent's padding?

You can fix the issue using a wrapper

Your HTML will look something along these lines:

<div id="panel">
    <div class="wrapper">
        <div id="bottom">
            <div class="update">
                a          
            </div>
        </div>    
    </div>
</div>

And your CSS:

#panel {
    width: 21.25%;
    height: 100%;
    background-color: #0794ea;
    float: left;
    padding: 0 1.5%;
    box-sizing: border-box;
}

.update {
    width: 100%;
    background-color: #006699;
    text-align: center;
    height: 56px;
    color: white;
}

.wrapper {
    position: relative;
    height: 100%;
}

#bottom {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    background: yellow;
}

Here is a pen with the end result: http://codepen.io/DanielVoogsgerd/pen/Lezjy

Make absolute positioned div expand parent div height

You answered the question yourself:

I know that absolute positioned elements are removed from the flow, thus ignored by other elements.

So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JavaScript.

Nowadays one might use CSS flexbox or grid layout to reverse the visual order of HTML elements inside a parent container without using position: absolute;. See also Reverse order of columns in CSS Grid Layout

Absolute positioning ignoring padding of parent

First, let's see why this is happening.

The reason is that, surprisingly, when a box has position: absolute its containing box is the parent's padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent's content box.

Here is the relevant part of the CSS specification:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.... Otherwise, the containing block is formed by the padding edge of the ancestor.

The simplest approach—as suggested in Winter's answer—is to use padding: inherit on the absolutely positioned div. It only works, though, if you don't want the absolutely positioned div to have any additional padding of its own. I think the most general-purpose solutions (in that both elements can have their own independent padding) are:

1. Add an extra relatively positioned div (with no padding) around the absolutely positioned div. That new div will respect the padding of its parent, and the absolutely positioned div will then fill it.

   The downside, of course, is that you're messing with the HTML simply for presentational purposes.

2. Repeat the padding (or add to it) on the absolutely positioned element.

   The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.

Is it possible enable div tag do not follow the parent div padding?

If you know the amount of padding the parent div has, you can simply reverse it like this:

.padding {     /* child element */
  width: 100%; 
  height:300px;
  margin-left: 50px; 
  padding-left: 50px; 
  background:#000;
}
.padding div {  /* child element */
  position:relative;  /* cling to parent */
  width: 100%;
  height:200px;
  left: -25px;  /* move back to edge of parent*/
  background:#f00;
}

How to set parent div's height as child div with position: absolute

I don't think this is possible with CSS while keeping the children absolutely positioned.

Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.

If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.

var content=document.querySelector('.content');var container=document.querySelector('.container');
content.style.height=container.offsetHeight + 'px';

*{box-sizing:border-box;}
.content {  width: 100%;  max-width: 1160px;  margin: 0 auto;  /*padding: 120px 0;*//*Padding removed for example*/   border:5px solid green;}.container{  position: absolute;  overflow: hidden;  width: 100%;  border:2px solid red;  height:652px;}

<div class="content">  <div class="container">    some other elements whose height is 652px...  </div></div>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Ignore parent padding

Easy fix, just do

margin:-10px

on the hr.

Setting an absolute position when parent div changes width

Why doesn't you start from the right of the input field?

Let us suppose you want to place the clear button 5px from the right side, you can use the following style:

.clearName{
 position: absolute;
 right: 5px;
 top: 5px;
}

This requires the input box uses the full width of the outer div.

The use of percentage is to dynamically because it depends of the width from the outer div (100px => 80% => 20px and 200px => 80% => 40px).

If you doesn't want to set the input field to the width of the outer div (.testing), you can flip the idea and set the outer div (.testing) to the width of the input field.

For that you can use:

.testing {
  display: table;
  margin: auto;
}

Relative parent DIV to inherit the width of absolute child DIV

The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.

Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.

As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.

---

Related Topics