Position absolute and parent height

Question

I have some containers and their children are only absolute   relatively positioned  How to set containers height so their children will be inside of them   Here s the code   HTML   lt section id  foo  gt       lt header gt Foo lt  header gt       lt article gt           lt div class  one  gt  lt  div gt           lt div class  two  gt  lt  div gt       lt  article gt   lt  section gt        lt div style  clear both  gt Clear won t do  lt  div gt   lt  -- I want to have a gap between sections here -- gt    lt section id  bar  gt       lt header gt bar lt  header gt       lt article gt           lt div class  one  gt  lt  div gt  lt div gt  lt  div gt           lt div class  two  gt  lt  div gt       lt  article gt   lt  section gt      CSS  article       position  relative      one       position  absolute      top  10px      left  10px      background  red      width  30px      height  30px      two       position  absolute      top  10px      right  10px      background  blue      width  30px      height  30px      Here s a jsfiddle  I want  bar  text to appear between 4 squares  not behind them   http   jsfiddle net Ht9Qy   Any easy fixes   Note that I don t know height of these children  and I can t set height  xxx for containers

User · Answer

This kind of layout problem can be solved with flexbox now, avoiding the need to know heights or control layout with absolute positioning, or floats. OP's main question was how to get a parent to contain children of unknown height, and they wanted to do it within a certain layout. Setting height of the parent container to "fit-content" does this; using "display: flex" and "justify-content: space-between" produces the section/column layout I think the OP was trying to create.

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

I modified the OP's fiddle: http://jsfiddle.net/taL4s9fj/

css-tricks on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

User · Answer

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

User · Answer

This is a late answer  but by looking at the source code  I noticed that when the video is fullscreen  the  mejs-container-fullscreen  class is added to the  mejs-container  element  It is thus possible to change the styling based on this class    mejs-container mejs-container-fullscreen          This rule applies only to the container when in fullscreen     padding-top  57       Also  if you wish to make your MediaElement video fluid using CSS  below is a great trick by Chris Coyier  http   css-tricks com rundown-of-handling-flexible-media   Just add this to your CSS    mejs-container       width  100   important      height  auto  important      padding-top  57      mejs-overlay   mejs-poster       width  100   important      height  100   important     mejs-mediaelement video       position  absolute      top  0  left  0  right  0  bottom  0      width  100   important      height  100   important      I hope it helps

User · Answer

This is another late answer but i figured out a fairly simple way of placing the  bar  text in between the four squares   Here are the changes i made  In the bar section i wrapped the  bar  text within a center and div tags    lt header gt  lt center gt  lt div class  bar  gt bar lt  div gt  lt  center gt  lt  header gt    And in the CSS section i created a  bar  class which is used in the div tag above   After adding this the bar text was centered between the four colored blocks    bar      position  relative

User · Answer

You can do that with a grid  article       display  grid      one       grid-area  1   1   2   2      two       grid-area  1   1   2   2

User · Answer

Here is my workaround  In your example you can add a third element with  same styles  of  one  amp   two elements  but without the absolute position and with hidden visibility   HTML   lt article gt      lt div class  one  gt  lt  div gt      lt div class  two  gt  lt  div gt      lt div class  three  gt  lt  div gt   lt  article gt    CSS   three      height  30px      z-index  -1      visibility  hidden

[html] Position: absolute and parent height?

Examples related to html

Examples related to css

Examples related to position

Examples related to height

Examples related to absolute