Как задать padding у блоков и сами блоки нужного размера?

[tigrus2014]

Приветствую! Собственно у меня такой вопрос. Есть покупной шаблон WP с которого я стащил стили (хочу сверстать что-то похожее но своих размеров. Своих размеров-это колонки и контент моего шаблона, а не WP. В общем берётся только технология вёрстки где это возможно. Проблема первая-это то что в WP шаблоне были множественные стили. Вот так:

<div id="content" class="content page-full main-contener clearfix">Какой-то content</div> 

Я логически свёл всё где можно в один класс, написал новые стили. Вышло вот что:

  Reveal hidden contents

<div class="wrapper">
	<header class="header">
	<div class="top-bar clearfix">
	<div class="logo">logo</div>
	<div class="menu">menu</div>
	</div>
	</header>
	<div class="page">
	<div class="content-wrap">
	<div class="content">content</div>
	<div class="gallery-preview">gallery-preview</div>
	</div>
	<div class="sidebar">
	<div class="sb-block">sb-block</div>
	<div class="sb-block">sb-block</div>
	<div class="sb-block">sb-block</div>
	</div>
	</div>
	<footer class="footer">footer</footer>
	</div>

 

И код CSS

  Reveal hidden contents

body {
	margin:0;
	padding:0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	background: #f1f3f5;
	color: #1a1a1a;
	margin:0;
	padding:0;
}

* {
	margin:0;
	padding:0;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1; /* ie 6/7 */
}

a {
	color: #444;
}

a:hover {
	color: #fc8f30;
}

a:focus {
	outline: none;
}

.wrapper {
	width: 100%;
}

.header {
	background: #2a2d33;
	height: 360px;
}

.top-bar {
	margin: 0 auto;
	padding: 0 2em;
	max-width: 1180px;
	width: 100%;
	background: #fff;
}

.logo {
	float: left;
	margin: 1em 1em 1em 0.5em;
	padding: 0;
	max-width: 100%;
}

.menu {
	float: right;
	margin: 1em 0;
}
	
.page {
	margin: 0 auto;
	padding: 1.5em 2em 0 2em;
	max-width: 1180px;
	width: 100%;
}

.content-wrap {
	float: left;
	box-sizing: border-box;
	padding-right: 2rem;
	width: 70%;
}

.content {
background: #fff;
}



.gallery-preview {
background: #fff;
}

.sidebar {
	float: right;
	width: 265px;
	background: #fff;
}

.footer {
clear: both;
background: #3f5e6a;
height: 250px;
}

 

Это так было в шаблоне WP ( всё где в em и rem, остальное мои доработки) Вся проблема в том, что я хочу сделать класс page немного меньше, его размер будет в 960px,  content-wrap  в 655px, sidebar в 265px. Заголовки в em и rem. Отсюда вопрос, какую брать ширину родителя в content-wrap, та что max-width, та что 100%,  в  1024px, в 1024px  минус полоска прокрутки? Как задавать padding и размер шрифтов в em и rem?

[klierik]

  On 9/26/2017 at 10:35 PM, tigrus2014 said:

в 1024px  минус полоска прокрутки

Expand  

Да

  On 9/26/2017 at 10:35 PM, tigrus2014 said:

Как задавать padding и размер шрифтов в em и rem?

Expand  

Почитать

• https://webref.ru/css/value/size
• https://webref.ru/html/em

[Hasiev]

@klierik, Пользуюсь случаем. В чем отличие em от %? И, используют ли em для блоков? Спасибо.

Edited September 28, 2017 by Hasiev

[klierik]

  On 9/28/2017 at 5:21 PM, Hasiev said:

В чем отличие em от %?

Expand  

Очень хорошо рассказано тут Единицы измерения: "px", "em", "rem" и другие

  On 9/28/2017 at 5:21 PM, Hasiev said:

И, используют ли em для блоков?

Expand  

Я не использую em — не удобно, много времени уходить на мат. вычисления. С тех пор как rem поддерживается всеми основными современными браузерами, то скорее буду пользоваться им