2 блока div на одном уровне, отступ (padding) от границы у второго блока

CLK · June 12, 2016

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>PAGE</title>
</head>
<body>
  <div class="wrapper">
    <div class="menu_sidebar">menu</div>
    <div class="content_sidebar">content</div>
    <div style="clear: both;"></div>
  </div>
</body>
</html>

.menu_sidebar {
  float: left;
  width: 250px;
}
.menu_sidebar, .content_sidebar {
  padding: 30px;
}
.wrapper {
  height: 100%;
  width: 600px;
  margin: 0px auto;
}

body {
  height: 100vh;
  margin: 0px;
  padding: 0px;
}
div {
  border: 1px solid gray;
  margin: 0px;
  padding: 0px;
}

не так часто с версткой имею дело, как сделать правильно, хочу что-то типа меню слева, содержимое справа, я задаю padding сразу на оба блока:

.menu_sidebar, .content_sidebar {
  padding: 30px;
}

"menu" нормально все, а вот "content" как видите от левой границе (border) не отталкивается, подскажите как правильно это сделать, да и вообще правильно ли я делаю эти "два блока div на одной строке (уровне)" или надо как по другому?

PS не хотелось бы контенту (content_sidebar) прописывать точные размеры.

как вариант можно когда задаю padding, взять content_sidebar отдельно и там 250px + 30px, отступ от левого края, но что-то мне этот вариант не нравится (почему то кажется что это не правильно, а можно как то по другому).

Edited June 12, 2016 by CLK

Igor Schnaider · June 13, 2016

Например, так:

.content_sidebar {
    overflow: hidden;
}

Launder · June 15, 2016

Можно ещё так:

.content_sidebar
    {
      margin-left: 312px;      
    }

Плавающий элемент проходит "сквозь" блочные элементы и сдвигает строчные. Поэтому нужно либо сдвинуть блочный элемент (ширина, с учётом отступов и границ) или изменив значение свойства overflow c visible, на иное, создать свой "замкнутый мир", в который float не проникает.

Sign In

2 блока div на одном уровне, отступ (padding) от границы у второго блока

Question

CLK

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Igor Schnaider

Link to comment

Share on other sites

Launder

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information