Занятое место блоком с posoition: relative

[Pumych]

Блок на котором position: relative после его сдвигания продолжает занимать место, возможно ли сделать что бы не занимал? Или нужно создать вокруг <h3> дополнительнуй блок и в него так же поместить и изображения?

Пытаюсь не награмождать код,

(1)как бы вы сверстали следуюшее без лишнего, но что бы текст не сползал:

<div class="block">
    <h3>Title</h3>
    <ul>
        <li><img src="btn-1" /> </li>
        <li> <img src="btn-2" /> </li>
    </ul>
    <p>
        Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
    </p>
</div>

<div class="block-2">
    <h3>Title</h3>
    <ul>
        <li><img src="btn-1" /> </li>
        <li> <img src="btn-2" /> </li>
    </ul>
    <p>
        Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
    </p>
</div>

.block {
    width: 30%;
    border: 1px solid black;
    float: left;
}

h3 {
    height: 30px;
    border-bottom: 1px solid #999999;
}

li {
    display: inline-block;
}

ul {
    width: 20%;
}

div.block ul,
div.block-2 ul {
    position: relative;
    bottom: 25px;
    left: 270px;
}

div.block-2 ul {
    position: relative;
}

.block-2 {
    width: 30%;
    border: 1px solid black;
    float: left;
}

ПС: Заметил что в Хроме при наведении на ul в моем коде с помошью developer tool с права от него появляется ораньжевый цвет (как будто это margin) в FF такого не происходит. Это баг или я что-то не правильно понимаю?

Edited November 27, 2011 by Pumych

[sammasati]

div.block ul,
div.block-2 ul {
    ...
    height: 0;
}

Но этот трюк сработает только для ul.

[Softlink]

Так, а что получить-то надо? Чтобы title и списки были на одном уровне? Задайте заголовку и ul display:inline-block;