Двухколоночный резиновый макет

@tunik · Регистрация: 05.12.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте, коллеги. Как сделать такой макет: две колонки, ширина одной вычисляется автоматически по ширине контента, ширина другой - все оставшееся место, при этом они не должны накладываться? Заранее благодарен

@Academik · 05.12.2014, 19:32

Если хотя бы одной колонке не указывать ширину, то вторая при большом кол-ве контента будет переходить на другую строку.

@Zarechnev · 06.12.2014, 02:10

tunik, Свойство overflow:hidden, по-моему, решило проблему и вторая колонка не нуждается в указании ширины.
Вот возможное решение.

@Academik · 06.12.2014, 06:58

Zarechnev, Не работает. Добавьте еще текста в левую колонку и всё поплывет.
http://jsfiddle.net/gagoso0o/2/

@Fedor92 · 06.12.2014, 11:49

tunik, а Вы не пробовали использовать свойство width:auto для 2-х колонок? Естественно понадобится небольшое условие... Задать фиксированную ширину для <body> или для родительского блока...

@monochromer · 06.12.2014, 18:39

tunik, а под какие браузеры нужна верстка?

@tunik · 08.12.2014, 11:14 **[ТС]**

ie8+,opera12+

@Lazy_Den · 08.12.2014, 11:23

tunik, дык в чем сложность? Смотрим.

HTML5

<div id="wrapper">
    <div>Left</div>
    <div>Right</div>
</div>

CSS

#wrapper {
    display: table;
}
#wrapper > div {
    display: table-cell;
}

Какбэ всё.

Двухколоночный резиновый макет

Решение

Решение

@tunik 0 / 0 / 0 Регистрация: 05.12.2014 Сообщений: 2
		1
	Двухколоночный резиновый макет 05.12.2014, 16:48. Показов 3339. Ответов 7 Метки нет (Все метки) Здравствуйте, коллеги. Как сделать такой макет: две колонки, ширина одной вычисляется автоматически по ширине контента, ширина другой - все оставшееся место, при этом они не должны накладываться? Заранее благодарен 0

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	05.12.2014, 19:32	2
	Если хотя бы одной колонке не указывать ширину, то вторая при большом кол-ве контента будет переходить на другую строку. 0

@Zarechnev 16 / 16 / 15 Регистрация: 25.09.2011 Сообщений: 104
	06.12.2014, 02:10	3
	Сообщение было отмечено tunik как решение Решение tunik, Свойство overflow:hidden, по-моему, решило проблему и вторая колонка не нуждается в указании ширины. Вот возможное решение. 1

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	06.12.2014, 06:58	4
	Zarechnev, Не работает. Добавьте еще текста в левую колонку и всё поплывет. http://jsfiddle.net/gagoso0o/2/ 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	06.12.2014, 11:49	5
	tunik, а Вы не пробовали использовать свойство width:auto для 2-х колонок? Естественно понадобится небольшое условие... Задать фиксированную ширину для <body> или для родительского блока... 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	06.12.2014, 18:39	6
	tunik, а под какие браузеры нужна верстка? 0

@tunik 0 / 0 / 0 Регистрация: 05.12.2014 Сообщений: 2
	08.12.2014, 11:14 [ТС]	7
	ie8+,opera12+ 0

	08.12.2014, 11:23