Здравствуйте товарищи! Столкнулся с проблемой...
Имеется примерно такой код:
<div id="phather2">
<div id="child2_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut earum sunt illum ad rerum delectus optio voluptates distinctio, perspiciatis maxime quis et adipisci, nemo ipsa laborum ex fuga consequuntur quae.</div>
<div id="child2_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic eos, nobis voluptatibus praesentium magni id asperiores enim nemo voluptas! Tempore possimus, dolorum quos harum velit et maiores atque molestiae eum.</div>
</div>
#child2_1{
float:left;
width: 100%;
padding: 10px;
box-sizing: border-box;
position: relative;
left: -51%;
}
#child2_2{
float:right;
width: 50%;
padding: 10px;
box-sizing: border-box;
}
Как вы понимаете сочетание Float и Relative невозможно... А надо чтобы первый .child2_1 сдвигался в сторону и освобождал место для child2_2.
Варианты и их проблемы:
Вариант 1
Элементы выстраиваются в один ряд за счет float (left и right), тогда я не смогу сдвинуть левую колонку из зоны видимости.
Вариант 2
Элементы выравниваются за счет position:relative для child2_1 и position: absolute для child2_2. Тогда высота родителя будет считаться только по высоте div.child2_1, а это никак не респонсив.
Вариант 3
Сдвигаться будет родительский элемент. В таком случае я не могу использовать сетку bootstrap для детей, а это обязательное условие.
Подумав, я решил что лучшим решением будет вариан №2...
А вопрос состоит так:
1) Правильно ли я все понял?
2) Помогите с решением выяснения высоты у элемента с абсолютным позиционированием... может есть какие-нибудь решения или скриптики... сколько искал, так ничего и не нашел в интернете.
ЗАРАНЕЕ, ОГРОМНОЕ СПАСИБО ЗА ПОМОЩЬ!
*** извиняюсь за некоторую сумбурность и капс.
Средний
