Как убрать расстояние между div?

Рейтинг: 0Ответов: 1Опубликовано: 16.12.2014

После того, как изменила позицию divов, на их месте осталось пустое место. Что с ним можно сделать? Как сократить?

https://verstka-daryushka.c9.io/index.html - то, что получается. См. расстояние между "инвестиционными проектами" (верстку делаю на ширину 767px).

    <div id="content">
            <div class="post">
                <img src="img/promparks.png" alt="Промышленные парки" />
                <div class="phead">
                    <p>Проект "Промышленные парки"</p>
                </div>
                <!--end phead-->
                <div class="description">
                    <p>Расположен в <b>2</b> административных районах города.</p>
                    <p>Расстояние от центра до города - <b>7 км</b>.</p>
                    <p>Численность тяготеющего населения <b>100 тыс. чел</b>.</p>
                    <p>Площадь проектирования - <b>240 Га</b>.</p>
                </div>
                <!--end description-->
            </div>
            <!--end post-->

            <div class="post">
                <img src="img/academpark.png" alt="Академпарк" />
                <div class="phead">
                    <p>Проект "Академпарк"</p>
                </div>
                <!--end phead-->
                <div class="description">
                    <p>Расположен в <b>2</b> административных районах города.</p>
                    <p>Расстояние от центра до города - <b>7 км</b>.</p>
                    <p>Численность тяготеющего населения <b>100 тыс. чел</b>.</p>
                    <p>Площадь проектирования - <b>240 Га</b>.</p>
                </div>
                <!--end description-->
            </div>
            <!--end post-->

    #content > div.post > div.phead {
    height: 50px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    text-transform: uppercase;
    font-family: "open Sans", "Open Sans Light", sans-serif;
    font-size: 16px;
    padding-top: 5px;
    position: relative;
    top: -350px;
    left: 50px;
}
#content > div.post > div.description {
    width: 425px;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.7);
    padding-left: 5px;
    padding-top: 5px;
    position: relative;
    top: -330px;
    left: 50px;
}

Ответы

▲ 2

@Дарья Бакланова, position: relative всегда оставит виртуальный элемент в потоке на том месте, на котором он стоял. Он сдвинет отображение, но для всех остальных элементов этот элемент останется на месте.