Масштабирование div блоков

@whitehell1992 · Регистрация: 14.11.2015

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

Здраствуйте столкнулся с проблемой при масштабировании страницы сьезжает div блок название .main вот код css

CSS

.style
{
 width: 935px;
 height: 890px;
 max-width: 1280px;
 min-width: 940px;
 border: 2px solid #056767;
 margin: auto;
 top: 20px;
 border-radius:12px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 -o-border-radius: 12px;
 -khtml-border-radius: 12px;
 background-color: white;
 box-shadow:
 inset 0 0 20px black,
 1px 1px 70px black;
 position: relative;
 behavior: url(css/PIE.htc);
}
 
.main
{
 width: 450px;
 height: 30px;
 border: 1px solid #056767;
 border-top-right-radius: 12px;
 border-bottom-left-radius: 12px;
 margin: auto;
 bottom: 873px;
 left: 245px;
 position: relative;
 background-color: #1F8E8E;
 behavior: url(css/PIE.htc);
}

@Fedor92 · 14.11.2015, 12:43

whitehell1992, для блока main примените правило {float:right} или {position:absolute; right:0; top:0}(при этом ширина родительского блока должна быть 100%)... Правила bottom и left можно будет убрать...

@whitehell1992 · 14.11.2015, 12:57 **[ТС]**

Не помогло (

@Fedor92 · 14.11.2015, 13:14

Сообщение от whitehell1992

Не помогло (

Отвечу кодом...

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
  <style>
    body, html{width:100%; height:100%; margin:0; background:#1f8e8e}
    .main{width:60%; height:850px; border-radius:15px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); margin:50px auto; border:5px solid #ccc; background:#fff}
    .right{float:right; width:50%; height:40px; background:#1f8e8e; border-radius: 0 10px 0 10px; margin: -5px -5px 0 0;}
  </style>
 </head>
<body>
<div class="main">
    <div class="right"></div>
</div>
</body>
</html>

Добавлено через 3 минуты
Вариант 2...

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
  <style>
    body, html{width:100%; height:100%; margin:0; background:#1f8e8e}
    .main{position:relative; width:60%; height:850px; border-radius:15px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); margin:50px auto; border:5px solid #ccc; background:#fff}
    .right{position:absolute; right:-5px; top:-5px; width:50%; height:40px; background:#1f8e8e; border-radius: 0 10px 0 10px}
  </style>
 </head>
<body>
<div class="main">
    <div class="right"></div>
</div>
</body>
</html>

@whitehell1992 · 14.11.2015, 13:20 **[ТС]**

Спасибо помог! Удачи тебе

@Fedor92 2964 / 2618 / 1068 Регистрация: 15.12.2012 Сообщений: 10,061 Записей в блоге: 11
	14.11.2015, 12:43	2
	whitehell1992, для блока main примените правило {float:right} или {position:absolute; right:0; top:0}(при этом ширина родительского блока должна быть 100%)... Правила bottom и left можно будет убрать... 0

@whitehell1992 0 / 0 / 0 Регистрация: 14.11.2015 Сообщений: 12
	14.11.2015, 12:57 [ТС]	3
	Не помогло ( 0

@whitehell1992 0 / 0 / 0 Регистрация: 14.11.2015 Сообщений: 12
	14.11.2015, 13:20 [ТС]	5
	Спасибо помог! Удачи тебе 0

Масштабирование div блоков

Решение