Нормально ли сделал сетку?

Question

[freeman0204]

Код codepen.io/anon/pen/qOXLLE
Есть 3 блока лого, форма, и форма регистрации.
Выменял в фотошопе процентное соотношение 3 блоков, и получилось 17,3 лого, форма width: calc(65.5% - 175px); 65.5% и и 175px слева от лого внешний отступ 150px и справа от формы регистрации 25px и сама форма регистрации занимает 17,2. Все вместе 17,3+65,5+17,2 = 100%. Вроде все правильно.
Смущает это смещения начиная с 937px и ниже начинает сползать форма регистрации под форму поиска и что самое непонятное это submit в форме начинает тоже съезжать вправо (смотрите скриншот screenshot.ru/c77095fd6a83fe5e1af401c75ad3e7e1). Почему так?
Я то понимаю что когда начинается такие проблемы, то подключают медиа запросы и как я понимаю, например, можно для планшетной версии убрать форму регистрации а форму поиска растянуть на -17,2% формы регистрации и + 17,2% к 65,5 и = 82,7% ширина формы регистрации? Ну и так как отступа теперь справа нет у формы регистрации то можно прописать не width: calc(65.5% - 175px) а width: calc(65.5% - 150px) и убрать правый марген? Правильно я мыслю?

Answer 1

[Андрей Хохлов]

Дичь какая-то.
Зафиксируйте ширину блока:
- минимальную
- максимальную
- или единственную если макет статичный

3 блока внутри расположите в ряд одним из способов (float / inline-block / table / flexbox)

Что касается ширины блоков, в правильном макете она должна измеряться в колонках: загуглите 960gs и Twitter bootstrap.
Если макет не по сетке то обматерите дизайнера самым грязным образом.

Условно блок выглядит так

<header>
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="auth"></div>
</header>

header {
  width: 960px;
  // clearfix...
}
.logo,  .nav,  .auth {
  float: left;
   width: 33.3333%;
}

Comments

[freeman0204]

Вот что получается если просто вставить текст screenshot.ru/99be854d01891a99e973e0360c5d4584 все ровно и красиво по 33.3333%;. Когда я вставляю свой контент, вот что получается codepen.io/anon/pen/JYyVjw
1. От логотипа справа отступа нет, но расстояние сразу такое как мне нужно. Не понимаю откуда оно?
2. Форма поиска вроде стоит ровно (теперь submit не сползает)
3. А вот больше всего меня удивил блок регистрации. При уменьшении экрана также уходит под низ. Почему? (Хотя если просто текст, то он просто сужается). И как я могу задать .auth margin-left: 163px; если места по сути быть не должно для margin так как 100% разбито на 3 блока по 33.3333%;.

[freeman0204]

Но если дать .auth не float: left; а float:right то вроде все хорошо и отступ тот что нужно сам появился. Тогда может крайнему правому элементу лучше давать float:right ? Вот код codepen.io/anon/pen/JYyVjw . Сейчас просто наезжают друг на друга при сужении, но не соскакивают. Так и должно быть?