резиновый шаблон

Borodulka · October 30, 2015

Такой вопрос: есть 2 колонки:

.fon {position:fixed; width:40%; text-align:right; min-width:200px; background-color:#000000; height:100%; float: right}

.content {margin-left:60%; position:relative}

Проблема возникает, когда экран сильно сжимается. левый слой доходит до 200 и останавливается, а правый-то продолжает сжиматься и текст заходит за левый столбец. Как это "победить"?

user · October 30, 2015

А как должно быть?

Borodulka · October 31, 2015

А как должно быть?

чтобы правый не заходил за левый...собственно...сделайте 2 div- а, параметры слоев указаны, попробуйте сжать экран и увидите что произойдет )))

<body>

</div>

</body>

Мразу предупреждаю - делать position:fixed для слоя content - не вариант, т к в случае,если контент будет превышать область экрана в мозиле например полосы прокрутки вообще нет.

Edited October 31, 2015 by Borodulka

Borodulka · November 2, 2015

Ау, гуру верстки!! ну помогите же кто-нить!!!

user · November 2, 2015

Так,например.

<body>    <div class="fon"></div>    <div class="wrap"></div>    <div class="content">111111</div></div></body>.content{float:left;}.wrap{float:left;width:200px;}

Edited November 2, 2015 by user

rus · November 2, 2015

Такой вопрос: есть 2 колонки:
.fon {position:fixed; width:40%; text-align:right; min-width:200px; background-color:#000000; height:100%; float: right}
.content {margin-left:60%; position:relative}
Проблема возникает, когда экран сильно сжимается. левый слой доходит до 200 и останавливается, а правый-то продолжает сжиматься и текст заходит за левый столбец. Как это "победить"?

все правильно, потому что у вас указано min-width.

а вообще, выкладывайте свой код впредь в песочницу: http://jsfiddle.net/- продуктивность в помощи будет больше!

Sign In

резиновый шаблон

Question

Borodulka

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

user

Link to comment

Share on other sites

Borodulka

Link to comment

Share on other sites

Borodulka

Link to comment

Share on other sites

user

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information