Вопросы по CSS

Есть проблема.
я двигаю элемент
с position:relstive;
он впроде двигается но после него остаётся пкстое место которого там не должно быть((
Что делать

echo '<a href="/albums/photo/'.$photo['id'].'""><img class="foto" src="../../files/foto/'.$photo['id'].'_mini.'.$photo['ras'].'" ><span id="info">я див прозрачный</span></a>';

===========================

.profile #info{
display: inline-block;
width: 100%;
background-color:#ddddd9;
color:#201e1a;
position: relative;
top:-29px;
}

Andrei4ik93, покажи ссылку или скрин как у тебя выходит и как нужно..

Andrei4ik93, задай родительскому элементу relative, а то, что нужно двигать сделай absolute

не помню кто спрашивал,
поле ввода для поиска которое раздвигается при клике.
сечас что то вспомнил

<div class="from-search">
    <input type="search">
</div>

.from-search {
        background: #000000;
        padding: 10px 5%;
        height: 44px;
        box-sizing: border-box;
    }
    .from-search>input[type="search"] {
        border-radius: 10px;
        background: #FFFFFF;
        box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.32);
        border: none;
        padding: 5px 10px;
        color: #000000;
        font-size: 14px;
        line-height: 20px;
        height: 24px;
        width: 100px;
        float: right;
        transition: 1s;
        box-sizing: border-box;
    }
    .from-search>input[type="search"]:focus {
        transition: 1s;
        width: 100%
    }

Всем привет, такая у меня проблема. Нужно левое меню растянуть до футера... Я сделал так...

.lic {
background: #444;
padding: 5px 10px;
color: #ccc;
}
.nav-left {
background: #444;
border-top: 1px solid #555;
color: #ccc;
padding-bottom: 90%;

}
.nav-left a {
display: block;
color: #cfcfcf;
padding: 10px;
text-decoration: none;
}
.nav-left a:hover {
text-decoration: none;
color: #ddd;
background: #555;
}

<div class="nav-left">
    <a href="/"><span class="glyphicon glyphicon-user"></span> Моя анкета</a>
    <a href="/"><span class="glyphicon glyphicon-tasks"></span> Настройки</a>
    <a href="/"><span class="glyphicon glyphicon-envelope"></span> Сообщения</a>
    <a href="/"><span class="glyphicon glyphicon-comment"></span> Моя гостевая</a>
    <a href="/"><span class="glyphicon glyphicon-file"></span> Портфолио</a>
    <a href="/"><span class="glyphicon glyphicon-shopping-cart"></span> Биллинг</a>
    <a href="/"><span class="glyphicon glyphicon-remove-sign"></span> Выход</a>
    </div>

Но если контента много...

PaRtiZzaN, у тебя подход неверный, ты простое пытаешься сделать сложным
берем блок (серый)
в него вкладывает еще 2 блока, первый без фона, это твое левое меню
и второй блок рядом, - собственно блок с основным контентом
таким образом родительский блок (серый) будет тянуться за вторым вложенным блоком создавая фон под первым вложенным блоком

для наглядности

ramzes, примерно понял, но сделал по другому))

.nav-left {
background: #444;
border-top: 1px solid #555;
color: #ccc;
position: fixed;
top: 105px;
height: 100%;
width: 230px;
}
.foot {
background: #333;
padding: 10px;
color: #ccc;
position: relative;
bottom: 0;
width: 100%;
}

PaRtiZzaN, height:100% - с этим может быть проблема (зависит от того как ты остальное задал)
если у тебя основной контент будет меньше 100% высоты, твое меню полезет ниже границы этого основного контента