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

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

Форум программистов > Вёрстка веб-сайтов > Родительский div выходит за рамки дочернего DIV

Автор: Xeroxed 24.2.2012, 05:06

Доброго времени суток.
Есть три объекта DIV (назовём #a, #b, #c), они расположены внутри родительского DIV (#parent). Родительский же входит в DIV (#layer), который "накрывает" всё 'body'. Каждый объект DIV имеет процентное соотношение. Так #a, #b и #c имеют свойства width=10%, 10% и соответственно 80%, а объекту DIV #parent свойству width причислено 90%, он же в свою очередь лежит напомню в объекте DIV #layer, у последнего width равен 100%. При этом у всех объектов свойство height равно 100%, что в данном случае не так важно.
Проблема в том, что #parent выходит за правую рамку последнего #c. При этом едва заметен краешек, словно включен border-right: 1px.
Ниже прилагаю поочерёдно код html и css.

Код


<div id="layer">
    <div id="parent">
        <div id="a">
           aaa
        </div>
        <div id="b">
           bbb
        </div>
        <div id="c">
           ccc
        </div>
    </div>
</div>

Код


body {
   width: 100%;
   height: 100%;
//   position: absolute;
}
#layer {
   width: 100%;
   height: 100%;
   position: absolute;
}
#parent {
   background-color: red;
   width: 90%;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
}
#a {
   background-color: rgba(51,51,51,1);
   width: 10%;
   height: 100%;
   float: left;
   overflow: hidden;
}
#b {
   background-color: rgba(102,102,102,1);
   width: 10%;
   height: 100%;
   float: left;
   overflow: hidden;
}
#c {
   background-color: rgba(153,153,153,1);
   width: 80%;
   height: 100%;
   float: left;
   overflow: hidden;
}

Прошу помощи коллективного разума. Может быть я что-то делаю не так? (;

Автор: ksnk 24.2.2012, 08:04

А что вы хотите от бедного броузера? smile

Проблема в том, что элементы при вычислении 10 и 80 процентов получают ЦЕЛУЮ ширину, а далеко не все числа делятся нацело на 10% и 80%. Можно явно установить ширину #layer в число кратное 100 (тогда вычисления будут точными) и убедится, что красная полоска пропала.