@lol_vova

Как правильно сделать отступы?

Объясните, пожалуйста, полоумному, как сделать так чтобы два блока div отделились друг от друга? Ну или чтобы когда придаешь одному свойство margin, то другой этому свойству не поддавался. У меня есть такой вот HTML-код:
<!DOCTYPE html>
<html>
<head>
	<title>Leiro Blog</title>
	<meta charset="utf8">
	<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="header"></div>
	<div id="page"></div>
	<div class="clr"></div>
</body>
</html>

И свойства этих блоков:
.fl_left, #header{
	float: left;
}

.fl_right {
	float: right;
}

* {
	margin: 0px 0px;
	padding: 0px 0px;
	outline: none;
	font-size: 14px;
	color: #FFF;
}

body {
	background: url("../img/bg.png") #35353e;
}

#header {
	width: 100%;
	height: 60px;
	position: fixed;
	background: url("../img/bg_header.png");
	border-bottom: 5px solid #231634;
}

#page {
	margin: auto;
	width: 900px;
	height: 9000px ; /* чтобы было видно */
	background: #000;
	margin-top: 65px;
}

.clr {
	clear: both;
}

Придавая отступ сверху 65px к блоку page, отступ присваивается и блоку header, выходит что они оба отступают сверху и блок page находится на заднем плане блока header
Если же придать свойство margin-top: -65px; блоку header, то получится то, что нужно, но я не уверен, что это правильно
Найти в гугле можно, но я не знаю, как сформировать запрос...
Версткой так таковой толком не занимался, новичок в этом, буду благодарен любой помощи :с
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Во-первых, не используй id для блоков, это нужно только для скриптов.

А во-вторых, сделай через padding-top для .page
https://jsfiddle.net/webirus/7ak1zwet/

В третьих, да, совсем не понятно, нахрена тут вообще float?
Работает без всяких флоатов.
https://jsfiddle.net/webirus/4gee5wqs/

Если хотите использовать margin, то нужно добавить для .header top: 0;
https://jsfiddle.net/webirus/y3p7z4p5/
Так как шапка фиксированная, но не выбрано позиционирование. И она прибивается к .page.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Не используйте float, у него очень много подводных камней и применять его можно только тогда, когда вы точно знаете, что он делает с потоком страницы. Ваша проблема вызвана именно им.
Опишите задачу, которую пытаетесь решить (сделайте пример на CodePen или jsfiddle) и вам расскажут как сделать правильно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы