Задать вопрос
winbackgo
@winbackgo
html

Как сверстать следующий блок?

Вчера я взялся за рефакторинг шапки одного сайта, сверстанную еще в далеком 2007 году на таблицах.

Дан контейнер:

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


для него CSS:

#wrapper {
    left: 0;
    margin: 0 auto;
    max-width: 900px;
    min-width: 600px;
    right: 0;
}

Нужно в контейнер расположить два блока по горизонтали (назовем их 1: left, 2: right).

Условия:

  1. Ширина блока 1 фиксированная
  2. Блок 2 должен иметь ширину 100% минус ширина блока 1 но не меньше определенной ширины (пусть будет 450px)
  3. Минимальная ширина блока 2 не будет никогда превышать минимальную ширину контейнера
  4. Если достигнута минимальная ширина блока 2, то блок 1 выходит за контейнер
  5. Если достигнута минимальная ширина окна, то блок 1 уходит за его пределы
  6. Совместимость с IE7+, nojs, no tables


Схематически можно представить следующим образом
Обычное положение



Достигнута минимальная ширина блока 2



Достигнута минимальная ширина окна




Задача кажется простой на первый взгляд, но я вчера не один час просидел над ее решением. Возможно она и простая, и я начал не с того конца, т.к. финальное решение кардинально отличалось от первоначального. Мне очень интересны свежие взгляды, так что если у вас есть время и желание, предложите свой вариант — как структуры так и css. Позже я выложу свой вариант. Спасибо за внимание.

P.S. Все указанные выше размеры — условны.
P.P.S. Почему я опубликовал это здесь? Верстка является для меня одним из самых интересных занятий в моей работе. Я люблю решать разные новые и интересные задачи — появляются они достаточно редко, ввиду того что уже все избито, и эта задача мне показалась интересной.

UPD: Мое решение: fiddle.jshell.net/d6xtJ/show/
  • Вопрос задан
  • 3023 просмотра
Комментировать
Подписаться 5 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
jsfiddle.net/9eTnn/ — так?
Ответ написан
1 комментарий
1 комментарий
Doktor_Gradus
@Doktor_Gradus
Для объявления «width: 70%;» объявление «max-width: 900px;» в Хроме работать не будет. Работает в ие8, опере и файрфоксе.

пруф
Ответ написан
4 комментария
4 комментария
@max_rip 
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		#wrapper {
			left: 0;
			margin: 0 auto;
			max-width: 900px;
			min-width: 600px;
			right: 0;
		}
		#wrapper2{
			overflow: hidden;
			border: solid red;
		}

		#left {
			background: #a3a3a3;
			width: 150px;
			margin-left:-150px;
			text-align: center;
			float:left;

		}

		#right {
			background: #f3f3f3;
			text-align: center;
			width:100%;
			min-width: 600px;
			max-width: 750px;
			overflow: hidden;
			float: right;
			padding-left: 150px;
		}​
		.clear{clear: both;}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="wrapper2">
			<div id="right">
				<div id="left">
					1
				</div>
				2
			</div>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>

Самое интересное, у меня все версии ie, отказались воспринимать max-width, min-width вообще +), так что проверить не могу. Выглядит это так, что #wrapper всегда занимает 100% окна +)
Ответ написан
8 комментариев
8 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы