Как прикрепить элементы друг к другу?

Question

[Tange]

При уменьшении размера браузера
Полный размер

.menu {
  background: #5bc995;
  height: 100vh;
  width: 240px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  outline: none;
}

Код меню

main {
  position: relative;
  height: 100vh;
  left:-300px;
}

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

Answer 1

[Виталий Инчин ☢]

Вложите 1 во 2 и спозиционируйте абсолютно.

Comments

[Tange]

А возможно без вложений?

[Виталий Инчин ☢]

Tange: конечно, но я же не вижу всего кода отсюда. Что такое .menu? main?

[Tange]

Код меню, как ясно из названия это Dashboard,Users..., а main это окно с сообщением

[Виталий Инчин ☢]

Tange: можно полный код?
В чем лежит main?

[Tange]

body {
  background: #ffea92;
  margin: 0;
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #fff;
  padding-left: 240px;
}
main {
  position: relative;
  height: 100vh;
  left:-300px;
}
main .helper {
  background: rgba(0, 0, 0, 0.2);
  color: #ffea92;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  padding: 1.2em 2em;
  text-align: center;
  border-radius: 20px;
  font-size: 2em;
  font-weight: bold;
}
main .helper span {
  color: rgba(0, 0, 0, 0.2);
  font-size: 0.4em;
  display: block;
}
.menu {
  background: #5bc995;
  height: 100vh;
  width: 240px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  outline: none;
}
.menu .avatar {
  background: rgba(0, 0, 0, 0.1);
  padding: 2em 0.5em;
  text-align: center;
}
.menu .avatar img {
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffea92;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}
.menu .avatar h2 {
  font-weight: normal;
  margin-bottom: 0;
}
.menu ul {
  list-style: none;
  padding: 0.5em 0;
  margin: 0;
}
.menu ul li {
  padding: 0.5em 1em 0.5em 3em;
  font-size: 0.95em;
  font-weight: regular;
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: auto 20px;
  transition: all 0.15s linear;
  cursor: pointer;
}
.menu ul li.icon-dashboard {
  background-image: url("http://www.entypo.com/images//gauge.svg");
}
.menu ul li.icon-customers {
  background-image: url("http://www.entypo.com/images//briefcase.svg");
}
.menu ul li.icon-users {
  background-image: url("http://www.entypo.com/images//users.svg");
}
.menu ul li.icon-settings {
  background-image: url("http://www.entypo.com/images//tools.svg");
}
.menu ul li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.menu ul li:focus {
  outline: none;
}

[GreatRash]

Tange: Парень. открой для себя codepen.io/pen

[Виталий Инчин ☢]

Tange: Так, оформите вот сюда HTML, нажмите Upgrade и скиньте ссылкой сюда.

[Tange]

Виталий Инчин: jsfiddle.net/cgdLec14/1

[Виталий Инчин ☢]

Tange: Как-то так

[Tange]

Виталий Инчин: Огромное спасибо!