html - Why is my LI tag not growing with it's child P tag? -


i can't figure out why li's height not increasing when p element does.. tried kinds of position , overflow on elements, don't see it.. can me out? in advance!

for more code see fiddle

html:

<div class='todo_list'>         <div class='add_list'>&#43; list</div><br>         <h3 contenteditable='true'>new list<span class='remove_list' contenteditable='false'></span></h3>         <ul>             <li>                 <input type='checkbox' class='task_status'>                 <p class='task' contenteditable='true'></p>                 <span class='drag'></span>             </li>         </ul>         <div class='add_task'>&#43;</div><br>     </div> 

css:

*{     margin: 0;     padding: 0; }  body{     font-family: tahoma, sans-serif; }  div.todo_list{     max-width: 700px;     margin: 0 auto; }  ul li{     overflow: hidden;     border: 1px;     border-style: solid;     border-color: #ccc;     border-top: none;     position: relative;     -webkit-transition: opacity .3s;     -moz-transition: opacity .3s;     transition: opacity .3s; }   p, input[type=checkbox]{     position: absolute;     height: auto; }   p{     top: 0;     right: 40px;     left: 38px;     padding: 12px;     border-left: 1px solid #ccc; } 

problem position: absolute; p , input elements.

they go out of natural page-flow height of li element won't increase...


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -