Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > border vs. width:100%

Автор: NCIAC 27.1.2011, 04:14

Здравствуйте.
Помогите решить проблему человеку, который не специалист в CSS. В диве есть другой див. Для внутреннего дива применён стиль:

Код


.style01 {
  padding-left:0px;
  padding-bottom:0px;
  float:right;
  width:100%;
  background:#F8E7BD;
  border:1px #c3b89a solid;
  margin-top:10px;
}

А наружный див имеет фон и получается, что при назначении бордера, этот самый бордер выступает на толщину бордера из внешнего дива. Если border-left и border-right не назначать, то внутренний див как раз вписывается во внешний, а так получается не красиво. Помогите справиться

Автор: Addmin 27.1.2011, 06:22

Используй вместо border свойство outline:
http://css.manual.ru/properties/outline

Автор: NCIAC 27.1.2011, 08:05

Цитата(Addmin @ 27.1.2011, 13:22)

Используй вместо border свойство outline:
http://css.manual.ru/properties/outline

Этот способ не подошёл

Автор: SelenIT 27.1.2011, 08:18

А разве нельзя width:100%; и float:right; просто убрать?

Автор: Addmin 27.1.2011, 08:42

Или сделать margin-left: 1px; и margin-right: 1px;

Автор: NCIAC 28.1.2011, 03:07

Цитата(SelenIT @ 27.1.2011, 15:18)

А разве нельзя width:100%; и float:right; просто убрать?

нельзя

Добавлено через 1 минуту и 40 секунд

Цитата(Addmin @ 27.1.2011, 15:42)

Или сделать margin-left: 1px; и margin-right: 1px;

margin-left и margin-right не работают при width:100%;

Автор: Addmin 28.1.2011, 05:24

Ну так и сделайте без width: 100%. Это чудесно работает в FF, Chrome. Думаю, Opera и IE тоже не будут капризничать smile

Код


<!DOCTYPE html>
<html>
<head>
    <title>Тестовая страница</title>
    <meta content="text/html" charset="utf-8">
    <style>
        *
        {
            margin: 0px;
            padding: 0px;
        }
        #wrapper
        {
            background-color: #ffa500;
            width: 200px;
            min-height: 500px;
            margin-left: 50px;
            margin-top: 50px;
        }

        .block1
        {
            outline: 2px solid black;
            height: 200px;
            margin: 2px;
        }
    </style>    
</head>
<body>
    <div id="wrapper">
        <br><br>
        <div class="block1">Halo!</div>
    </div>
</body>
</html>

Добавлено через 12 минут и 12 секунд
Предпросмотр:
http://jsbin.com/omece3/edit

Автор: SelenIT 28.1.2011, 14:44

Цитата(NCIAC @ 28.1.2011, 03:07

)

нельзя

аргументируйте ;)

Автор: Addmin 29.1.2011, 19:48

Ах да, IE 7 не понимает outline. Просто замените в примере outline на бордер smile