Как выровнять элементы в блоке по левому и правому краю?

Question

[andreyka_g]

Есть div, ширина которого 100%, в нем находятся две кнопки - одна располагается с левого края, другая - с правого. То есть они находятся на противоположных краях дива.

Как без использования position: absolute/relative, margin и padding такое реализовать?
Пробовал через float, но элементы съезжают. При position: absolute перестает работать height: auto (хотя, наверное, я до конца не разобрался с этим свойством).

Вот
jsfiddle.net/Dbpb9/1

Answer 1

[Юрий Лобанов]

jsfiddle.net/Dbpb9/2

тут написано про схлопывание (потеря высоты родителя, когда в нем содержатся только блоки с float) и как его избежать
css-tricks.ru/Articles/Details/AllAboutFloats

Comments

[andreyka_g]

Большое Вам спасибо!

Answer 2

[Виталий Желтяков]

jsfiddle.net/4xN89
Суть в чём:
.btn-group теряет высоту, т.к. неопределенна высота родителя.
Каждому div с классом .btn-choose нужен отдельный класс с float.

Верстку Вам ещё учить и учить...

Comments

[andreyka_g]

чуть-чуть не понял по поводу высоты. допустим, btn-group находится в диве container с hegiht: auto, что измениться? подскажите , пожалуйста, как сделать чтобы высота подстраивалась под содержимое блока ( хотя бы на этом примере)? "Верстку Вам ещё учить и учить..." - потому и спрашиваю)

[Виталий Желтяков]

@andreyka_g Суть в том, что если ширина автоматом считается равным 100% , то высота напротив зависит от содержимого. Поэтому важно по цепочке от родителя потомкам устанавливать высоту.

В данном примере, т.к. высота родительского контейнера точно не определена (hegiht: auto не прокатывает), то и все дочерние контейнеры не имеют определённой высоты.

Можно так же использовать clear:both (как в примере @iiil).