Как правильно использовать css выравнивание блоков, чтобы на разных мониторах было одинаково?

Question

[Martyer]

Как правильно использовать css выравнивание блоков, чтобы на разных мониторах было одинаково?
Дана область 75%, в ней три ячейки, выровнял все так, что в итоге получилось 75%. Расположение обьектов в ячейках правильное, однако, на мониторе в 2 раза больше правильно стоит объект только в первой (левой) ячейке, а средний и правый смещаются.
Хотелось бы поинтересоваться, как вы справляетесь с такими проблемами? Заранее благодарен за любые подсказки.

Answer 1

[whats]

Неплохо было бы увидеть код задачи

Comments

[Martyer]

вот закинул шаблон сюда тыц

основную таблицу сделал 75% тут:
table.main {width: 75%; height: 100%; margin: 0 auto;border-collapse: collapse;}

создал область header и разделил на три части:
table.header {width: 100%; height: 100%; border-collapse: collapse; }
td.top { height: 65px;background:#3ec5fd;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}

td.logo {width:30%;}
td.social {width: 25%; padding-top: 10px;}
td.search {width: 20%; position: absolute; }

[Martyer]

немного поменял

td.logo {width:34%;}
td.social {width: 21%; position: absolute; padding-top: 10px;}
td.search {width: 40%; }

[whats]

вы можете оформить это все на любом фидле. И как должно выглядеть итоговое решение! Хоть картинкой. вообще не понятно что надо получить и что имеется.
Я так понимаю проблема с выравниванием в синем блоке ? Должно быть равномерное выравнивание ? Если так то скидывайте задачу на фидле я вам поправлю как должно быть

[whats]

Martyer: Вы понимаете что вы в корне все делаете не верно ? не бывает у ячеек таблицы обтекания. Верстайте дивами

Answer 2

[dm]

Размеры внутренних ячеек в процентах заданы? Ширина

Вот вам готовая шапка:
HTML

<header>
<div></div>
<div></div>
<div></div>
</header>

CSS

header {
width: 75%;
margin: 0 auto;
}
div {
float: left;
width: 33%;
}
header::after {
content: "";
display: block;
clear: both;
}

Comments

[Martyer]

да. в общем 75%, т.е первая 25%, вторая 25%, ну и третья 25%

[dm]

Martyer: Зачем делать таблицей? Из-за этого все неудобства. Если сделаете три блока с шириной в % и зададите им float: left, то они будут себя вести как надо.

[dm]

Martyer: Есть готовые макеты - htmlbook.ru/layout

[Martyer]

Дмитрий Кострубяк: первый раз решил сделать таблицей, ибо с дивками возникает не меньше проблем.. сейчас попробую ваш вариант, огромное вам спасибо)

Answer 3

[Anah]

Ну если так не хочется разбираться с движком и учить скриптовые языки, то у HTML есть include- даже не надо файл делать в формате HTML. Он может быть txt, главное прописать правильно путь. Можно поставить в include весь section, а aside header footer оставить на основной HTML странице. А можно делать шаблон с внутренней разметкой и отдельные блоки ставить в include(импорт). Но делать это все равно в ручную. Просто не надо создавать всю шапку, подвал и другие повторяющиеся элементы каждый раз. Так же можно имитировать шаблонизацию многостраничности и многомодульности. Но когда их станет много - это не вариант. Это катит только для сайта визитки.

Comments

[Martyer]

Спасибо, приму к сведению и ознакомлюсь с вашими советами)