css messed up (авто высота)

Question

У меня проблема с CSS-стилем. Это случается, когда я устанавливаю высоту на авто website

Доступ к просмотру в режиме реального времени by diung this go to newproject.comli.com/post.php Войдите в систему с именем пользователя = shining password = asdfgh123, а затем вручную перейдите на страницу newproject.comli.com /details.php

поэтому моя высота div устанавливается на 0, не знаю почему. Я говорю о #itemsCategListsform может кто-нибудь мне помочь? Вот мой код:

<div id="itemsCategListsform"> 
    <div id="plink"> 
     <div id="open">My details</div> 
     <div id="closed"><a href="ads.php">My ads</a></div> 
     <div id="closed"><a href="fav.php">Favorites</a></div> 
    </div> 
    <div id="pbase"> 
     <div id="detailforms"> 
      <p> Email: 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
       <input type="email" name="email" size="30"> 
       <input class="submit-buttonform" type="submit" name="updateemail" value="Update Email"> 
       </form> 
      </p> 
      <p> 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
        Password: <br> 
        <input type="password" name="password" size="30"><br> 
        Re-Password: <br> 
        <input type="password" name="repassword" size="30"> 
        <input class="submit-buttonform" type="submit" name="updatepassword" value="Update password" > 
       </form> 
       </p> 
       Phone: 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
        <input type="text" name="phone" size="30"> 
        <input class="submit-buttonform" type="submit" name="updatephone" value="Update phone"> 
       </form> 
       Website: 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
        <input type="text" name="website" size="30"> 
        <input class="submit-buttonform" type="submit" name="updatewebsite" value="Update website"> 
       </form> 
      </div> 
     </div> 
    </div> 

и CSS:

#itemsCategListsform { 
    background-color: white; 
    position: relative; 
    width: 930px; 
    height: auto; 
    left: 175px; 
    top: 20px; 
    border-radius: 4px; 
    border: 1px solid #1a171a; 
    padding-top: 40px; 
    padding-left: 70px; 
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6); 
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6); 
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6); 
} 

#plink { 
    position: relative; 
    width: 200px; 
    float: left; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    z-index: 10; 
    border-radius: 4px 0 0 4px; 
    -webkit-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    -moz-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 

} 
#open { 
    border-bottom: 1px solid black; 
    border-right: 1px solid #fbfbfe; 
    text-align: center; 
    line-height: 50px; 
    background-color: #fbfbfe; 
} 
#closed { 
    border-bottom: 1px solid black; 
    width: 200px; 
    text-align: center; 
    line-height: 50px; 
} 
#pbase { 
    border: 1px solid black; 
    background-color: #fbfbfe; 
    position: relative; 
    width: 600px; 
    height: auto; 
    float: left; 
    margin-left: -1px; 
    border-radius: 0px 4px 4px 4px; 
    -webkit-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    -moz-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.6); 
} 

#closed:hover a { 
    display: block; 
    background-color: #fbfbfe; 
    border-right: 1px solid black; 
} 


#open:hover a { 
    display: block; 
} 

#detailforms { 
    position: relative; 
    margin:0 auto; 
    top: 10px; 
    width: 450px; 
    height: auto; 
    margin-bottom: 40px; 
} 

Answer 1

Высота регистрирующего как 0, так как дочерний элемент плавали. CSS float берет элемент из потока содержимого и обматывает встроенные элементы вокруг него.

Ваша проблема здесь:

<div id="itemsCategListsform"> 
    <div id="plink"> 
    ... 

#plink{ float: left; } 
#phase{ float: left; } 

Я бы рекомендовал добавить псевдо элемент после того, как родитель с clear: both набора.

<div id="itemsCategListsform" class="clearfix"> 
    <div id="plink"> 
    ... 

.clearfix:after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
} 

See some additional solutions here.

Answer 2

Добавить display: inline-block в CSS из itemsCategListsform :)

Answer 3

хорошо с помощью DACrosby была легко решена, как он сказал, что из-за поплавком слева и решить, что я просто добавить переполнения: авто; скажите мне, если бы я сделал хорошее или есть лучшее решение, потому что это было очень просто и, похоже, все в порядке