How to force position absolute with 100% width to fit into parent div with padding?

position: absolute; width: 100% of parent
position: absolute; width of content
width: 100 not working position absolute
width of absolute positioned element
css ignore parent padding
absolute div inside relative div width 100
position: absolute child width
css child wider than parent

I have 2 divs, an outer div which is a parent and a child div. The outer div is position relatives with padding 20px for left and right while the child is position absolute with 100% widthg. How can I force the child which is position absolute to be within the parent, ie respecting the padding 20px (inside parent and within the 20px padding)

I've done the example here: http://www.bootply.com/nyGZzTVY8v

I've read about box-sizing but I still don't understand how to implement it correctly. Tried putting it on the box1 class and nothing happen, tried putting on the box2 class and nothing happen also.

thanks in advance.

Additional Note: It has to be responsive ie I do not know the size of the parent div thus the 100% for the child div.

If it has to be responsive, you could add the the padding as a margin and then use calc for the width:

.box2 {
    position: absolute;
    width: calc(100% - 40px);
    left: 0px;
    padding: 50px 0;
    margin: 0 20px;
    colour: #000;
    background: #fff;
    border: solid thin #06F;
}

5. CSS layout: tricks and layout techniques, I have 2 divs, an outer div which is a parent and a child div. The outer div is position relatives with padding 20px for left and right while the child is position  #site_nav_global_primary { position: absolute; width:100%; top:0px; left:0px; } The navigaation gets the 100% of the wrapper which is max 1003px width. i want it to stretch to the maximum without changing the wrap and header divs.

Just set left: 20px; and right: 20px; and remove width: 100%

Live Demo

.box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    left: 20px;
    right: 20px;
    border: solid thin #06F;
}

or add left: 20px; and the calc function width: calc( 100% - 40px )

.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
left: 20px;
border: solid thin #06F;
}

live Demo

Aspect Ratio Boxes, Sizing-related techniques allow you to define how a particular element should be The following snippet forces the html and body tags to take up 100% of the If you leave the width (and/or height for absolutely positioned elements) Set the parent to position: relative , and then use position: absolute for the child element. If you need 100% width or height for a div but you have padding/border that aren’t counted in the 100%, and therefore the 100% exceeds the parent - use top:0 and bottom:0 with a padding. Example (can be also solved with box-sizing, which isn’t supported by IE8).

Once you use position absolute the div wont be in its parent div.instead you can use position relative with and give it width:inherit this will inherit the width of the parent div

Full Width Containers in Limited Width Parents, So if you had an element that is 500px wide, and padding-top of 100%, the If we force the height of the element to zero ( height: 0; ) and don't have any borders. I'd say it's very common for any random image not to fit into a very specific pre-defined .aspect-ratio-box-inside { position: absolute; top: 0; left: 0; width: 100%;  I want to have an inner div that sites inside different sized container divs, and starts at a fixed left position and then has a width that fills up the rest of the container.

This works perfect, try it out. The parent div should have a relative position and the child div could have an absolute position like you want.

.box1 {
    width: 50%;
    margin: 10px;
    position:relative;
}
.box2 {
    display: block;
    position: absolute;
    width: 100%;
}

Width and Absolute Positioning, This image is 100% wide as it's limited-width parent. If we could use absolute positioning, we could set the container to be at left: 0; But margin is calculated based on the parent element, so to pull it to the left You want to: Limit the width (for large screens) Pad the edges Center the content It's "the… Hi Louis, actually i guess this won’t happen in the given example, because the padding will be added to the width changing the final width. But It will happen if your parent element has an explicit width (like the example) and its child has width: 100% AND margins or paddings set.

Detailed Positioning, Top, right, bottom, and left are based on the nearest positioned ancestor. left: 0; and top: 0; left: 0; width: 100%; height: 100%; are equivalent. But a quick look at the spec made it clear that padding and margin would weigh in. for the absolute positioning, one to serve as the parent, and then the child,  Hi, I have a parent div with height: auto. In this div, there are two other divs. One with an icon, one with some text in it. These divs both have height: auto as well so the text mainly decides

CSS Tricks: Expanding Beyond a Parent div, One way to force containing these floats would be to place an empty element just before the One technique for containing floats within a parent element is to use the CSS Since the height may likely be variable a width of 100% will do the trick. only work on elements with a relative , absolute , or fixed positioning value. An element with the display value of block will automatically take up the most space it possibly can, and when you changed the position value to relative you took it out of the normal document flow and its maximum value became 100vw automatically. In your example you can the width: 100vw; line out totally and it will look the same in all cases.

Relative div with absolute images - HTML & CSS, If you adjust the full width mentioned above make sure you adjust this left margin to equal -((width - 100%)/2). The next step is to remove the horizontal scrolling  In the above examples Image will be fit into parent div element without scaling it. Say for example our image dimensions are 100*100 that means width to height ratio is 1:1. In first div width is 50px and height is 80px i.e., maximum image width can be only 50px as the image width to height ration 1:1 so height is adjusted to 50px.

Comments
  • Nope, not 2 divs in your example. 1 div, 1 p and 1 a.
  • Sorry, it will be reponsive, I'm just showing part of the whole design.
  • do you need to make the second div position absolute?
  • Yes I do, as I will need it to stick to a position later and resize itself when the browser resize. Everything is working fine except with that irritating extra space of the child. I know I can reduce the 100% to something like 95% or so, but I don't think that is the right solutions.
  • Thank you so much the calc solve the problem. I thought box-sizing would do the trick. now learn something new. Thank you.
  • Left: 0 will fit into the parent box but not respecting the parent padding spacing. I actually wanted the box2 to be inside box1 and respecting the padding. Thanks anyway.
  • @StrangeLove use the left and right bootply.com/QfXswy7K9f or the calc function see bootply.com/bEE3IHKMVg .
  • Thank you so much the calc solve the problem. I thought box-sizing would do the trick. now learn something new. Thank you.
  • Worked for me. Thanks
  • Sorry, but inherit is not working like that. It has no effect if overflow is not defined.