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
Post a Comment