Плоха ли верстка в 2 колонки с помощью абсолютного позиционирования?

Question

[Snewer]

Здравствуйте!

Насколько плохо верстать двухколончатый макет страницы с помощью абсолютного позиционирования? Много где, пишут что позиционирование это крайность.

Спасибо.

Answer 1

[Виталий Киренков]

<style>
			.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;}
			.clearfix { display: inline-block;}
			* html .clearfix { height: 1%;}
			.clearfix { display: block;}

			.wrapper { margin-right: 220px;}
			.wrapper .col_left { float: left; background: green; width: 100%;}
			.wrapper .col_right { float: right; position: relative; width: 200px; margin-right: -220px; background: red;}
		</style>
		<div class="wrapper clearfix">
			<div class="col_left">col_left</div>
			<div class="col_right">col_right</div>
		</div>

Думаю, дальше разберётесь. Права фикс, левая тянущаяся. Без абсолютов.

Comments

[Snewer]

Спасибо. Но почему позиционирование так уж плохо?

[Виталий Киренков]

Оно не плохо, просто всему своё место. Нет же смысла забивать гвозди кувалдой, верно? Хотя так то можно..))

[Snewer]

@DeLaVega У меня есть левый блок (занимает 100% + имеется отступ справа для правого блока). Правый блок абсолютно позиционирован. Сойдет?

[Виталий Киренков]

В принципе - да. Но я бы рекомендовал всё же мой вариант. В вашем варианте лишние релативы будут, так же з-индекс проставлять надо, с которым чисто случайно могут возникнуть проблемы, если другой блок будет иметь больший з-индекс.

[Snewer]

@DeLaVega Лишние релативы это плохо?

[Виталий Киренков]

Ну лишние же..)) Надо стремиться к оптимальности, чтобы всё работало, было удобно читать и весило как можно меньше.

[Snewer]

@DeLaVega Наверно) Спасибо! Будем оптимизироваться)

Answer 2

[Илья Сидоренко]

Не самая лучшая идея. А зачем верстать с помощью absolute?

Comments

[Snewer]

Правый блок фиксированной ширины, а левый занимает всю оставшуюся область

[Snewer]

Чем плох вариант?

[Илья Сидоренко]

@Snewer это можно сделать с помощю % например.
Посмотрите примеры:
htmlbook.ru/samlayout/tipovye-makety/rezinovyi-tre...

[Snewer]

@iskros В чем минус позиционирования?

[Илья Сидоренко]

@Snewer не адаптивность к примеру. А это в современном вебе очень важно

[Snewer]

@iskros не адаптивность к чему? IE 6?

[Игорь Воротнёв]

@Snewer адаптивность - "подстройка" верстки на разных разрешениях экрана (читай - на разных устройствах).

[Snewer]

@iskros в примере как раз таки используется абсолютное позиционирование

Answer 3

[subalex]

position: absolute нужно использовать там, где нельзя без этого обойтись. имхо.

Comments

[Илья Сидоренко]

@subalex согласен. Где вы используете?

[Snewer]

@iskros макет страницы, конечно

Answer 4

[Crash]

Лучше верстать, используя float