Position: absolute and parent height?

by

If I understand what you’re trying to do correctly, then 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.

Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

More Related Contents:

  1. Percentage Height HTML 5/CSS
  2. Why doesn’t height: 100% work to expand divs to the screen height?
  3. How to overlay one div over another div
  4. Make body have 100% of the browser height
  5. How does the “position: sticky;” property work?
  6. Make absolute positioned div expand parent div height
  7. How to make a div 100% height of the browser window
  8. Make div (height) occupy parent remaining height
  9. make div’s height expand with its content
  10. CSS absolute position won’t work with margin-left:auto margin-right: auto
  11. Difference between position:sticky and position:fixed?
  12. Height percentage not working in CSS
  13. Div width 100% minus fixed amount of pixels
  14. How to center div vertically inside of absolutely positioned parent div
  15. What are the CSS properties that get elements out of the normal flow?
  16. How might I force a floating DIV to match the height of another floating DIV?
  17. CSS position element “fixed” inside scrolling container
  18. click link below a higher z-index div [duplicate]
  19. How to set a percentage height value in HTML/CSS
  20. How to fill 100% of remaining height?
  21. CSS – make div’s inherit a height
  22. Place a button right aligned
  23. Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
  24. Hide element, but show CSS generated content
  25. Splitting a table cell into two columns in HTML
  26. Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS
  27. How to center image in a div horizontally and vertically
  28. how to call browser based css?
  29. How can I position an icon over an image or video?
  30. 2 colors in one placeholder of input field

Leave a Comment