css - overflow: Div not expanding with content -


i putting multiple divs (about 10) inside single div. setting overflow of container div hidden (solid border) expand , maintain size of inner block(s) without scrollbar, referencing post make-divs-height-expand-with-its-content. after adding first inner div relative position, top 0 , height of 40, container div expands 60. shouldn't container div have height of 40, or normal behaviour? there no padding. css height values have px.

this html have far , associated css

<body> <div class="page">      <div class="welcome">      </div>      <div class="header">      </div>      <div class="jobdetails">         <form action="register.php" method="post" name="registerjob" id="registerjob">             <div class="reference">              </div>             <br>             <div class="title">              </div>             <br>             <div class="sector">              </div>             <br>             <div class="description">              </div>              <div class="county">              </div>              <div class="licence">              </div>              <div class="degree">              </div>              <div class="exp">              </div>              <div class="salary">              </div>              <div class="skill">                  <div class="skills">                   </div>                   <div class="reg">                  </div>             </div>            </form>     </div> </div> 

.page{ position: absolute; top: 0px; left: 0px; min-height: 99%; min-width: 100%;                                                             }                                                                    .welcome{ position: relative; top: 0px; left: 0px; height: 60px; width: 100%; border: solid;                                                               } .header{ position: relative; top: 0px; left: 0px; height: 80px; width: 100%; border: solid; }                                                                  .reference{ position: relative; top: 0px; left: 515px; height: 40px; width: 25%;                                                                  }                                                           .title{ position: relative; top: 20px; left: 515px; width: 25%; height: 40px;                                                                }                                                   .description{ position: relative; top: 40px; left: 425px; width: 40%;                                                                  }                                                          .sector{ position: relative; top: 60px; left: 515px; height: 40px; width: 25%;                                                                  }                                                          .county{ position: relative; top: 80px; left: 515px; height: 40px; width: 15%;                                                                  }                                                         .licence{ position: relative; top: 100px; left: 515px; height: 40px; width: 60%;                                                                  }                                                          .degree{ position: relative; top: 120px; left: 515px; height: 40px; width: 50%;                                                                  }                                                             .exp{ position: relative; top: 140px; left: 375px; height: 40px; width: 60%;                                                                  }                                                          .salary{ position: relative; top: 160px; left: 390px; height: 40px; width: 30%;                                                                  }                                                          .skills{ position: relative; margin-top: 20px; left: 0px; width: 600px;                                                                }                                                           .reg{ position: relative; top: 350px; left: 515px; height: 50px; width: 20%;                                                                  } 

i decided away container div altogether , use relative positioning divs instead. cleaner.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -