Смещение дочерних блоков

@Dazz1e · Регистрация: 26.01.2015

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

Имеется один основной блок, в нем второй дочерний и в дочернем куча блоков на 100% заполнении дочернего.

В дочернем указываю ширину для блока в 100%.
Дальше у меня идет еще один блок, я так же указываю 100%, но у меня появляется смещение.
Для теста создал ниже еще один блок, у него смещение такое же как и предыдущего. В чем может быть трабла? Коды CSS идентичны, а смещение имеется.

Вот код пяти блоков:

CSS

.b { //основной блок
    width: 60%;
    height: auto;
    top: 21%;
    right: 20%;
    left: 20%;
    position: fixed;
    border: solid red;
}
.box {//дочерний блок
    width: 100%;
    min-height: 450px;
    height: auto;
 
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: white;
    background: -moz-linear-gradient(#eeefef, #ffffff 10%);
    background: -ms-linear-gradient(#eeefef, #ffffff 10%);
    background: -o-linear-gradient(#eeefef, #ffffff 10%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
    background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
    background: linear-gradient(#eeefef, #ffffff 10%);
    border: solid red;
}
.b_one { //первый блок в дочернем блоке (стоит как надо, ровно)
    float: top;
    float: left;
    width: 85%;
    height: 130px;
    border: solid red;
}
.top_block { //блок с неизвестным смещением
    text-align: center;
    width: 85%;
    float: left;
    float: top;
    min-height: 100px;
    border: solid red;
}
.bottom_block { // второй блок с неизвестным смещением
    text-align: center;
    bottom: 10px;
    width: 85%;
    float: left;
    float: bottom;
    min-height: 100px;
    border: solid red;
}

В правой части дочернего имеется еще один блок, он занимает 15% правой стороны.

Картинка показывающая смещение:

@Shakalaka · 23.03.2015, 14:59

Не по теме:

float:top и float:bottom - это сильно).

А вообще, выложи еще HTML, ибо тут сложно что-то понять.

@сахей · 23.03.2015, 15:21

Dazz1e, загрузи код на jsfiddle.com
и кинь ссыль=)
ну и попробуй задать у всех нулевые отступы=)

CSS

1	*{padding:0;margin:0;}

@Dazz1e · 23.03.2015, 15:22 **[ТС]**

Вот!)

HTML5

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="windows-1251" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Тест</title>
        <link rel="shortcut icon" href="favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="js/modernizr.custom.63321.js"></script>
            <!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
        <style>
        body {
            background: #D3D3D3;
            }
 
        </style>
    </head>
    <body>
        <h1 class="h1_1">Титульный титул))</h1>>
        <div class="container">
            <header>
        <div class="b">
                <div class="box">
                <div class="b_one">Бла бла бла бла бла бла бла !!!!</div>
                <div class="top_block" id="top">
                        <h33>Верхний блок</h33><br/>
                </div>
                <div class="bottom_block" id="bottom">
                        <h33>Нижний блок</h33><br/>
                        <input type="text" id="1_get" onclick="comp_set_1()" readonly value="asd">
                </div>
                </div>
                </div>
            </header>
        </div>
    </body>
</html>

@сахей · 23.03.2015, 15:24

http://jsfiddle.net/

Добавлено через 2 минуты
http://jsfiddle.net/5of9gn88/ тут нет никаких отступов

@Dazz1e · 23.03.2015, 15:27 **[ТС]**

Отступы помогли, спасибо.
Но ведь они не обязательны, по умолчанию они стоят: 0

Как сам не додумался?!)))

Добавлено через 1 минуту
Пока еще тут, еще есть вопрос. Читал в каком то мануале, что если в материнском высота стоит auto, то дочерняя высота может быть указана только в пикселях, в процентах она не робит. А есть ли возможность обойти?

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	23.03.2015, 14:59	2
	Не по теме: float:top и float:bottom - это сильно). А вообще, выложи еще HTML, ибо тут сложно что-то понять. 0

@сахей 65 / 65 / 20 Регистрация: 26.02.2013 Сообщений: 336 Записей в блоге: 1
	23.03.2015, 15:24	5
	http://jsfiddle.net/ Добавлено через 2 минуты http://jsfiddle.net/5of9gn88/ тут нет никаких отступов 0

@Dazz1e 0 / 0 / 0 Регистрация: 26.01.2015 Сообщений: 8
	23.03.2015, 15:27 [ТС]	6
	Отступы помогли, спасибо. Но ведь они не обязательны, по умолчанию они стоят: 0 Как сам не додумался?!))) Добавлено через 1 минуту Пока еще тут, еще есть вопрос. Читал в каком то мануале, что если в материнском высота стоит auto, то дочерняя высота может быть указана только в пикселях, в процентах она не робит. А есть ли возможность обойти? 0