CODEWITHSUNDEEP
htmlcss
continues__13
continues__13

Reputation: 23

margin-right does not work on relative element? (width 100%)

My problem currently is, that margin-right does not work anymore with width: 100%.

I already tried leaving the width: 100% off, changing the position etc. but nothing works. All questions I've saw in the internet and the answers hasn't helped me out. I tried so much. Does it actual work without width: 95% and stuff like that? Did I miss something?

<body>
    <div class="content" id="id_content">
      <div class="topbar-header">
        <input type="text" class="topbar-field" style="min-width: 300px; max-width: 600px; width: 30%;">
      </div>
    </div>
  </body>

/* The header to search and navigate on. */
.topbar-header {
  position: relative;
  margin: 20px;
  width: 100%;
  height: var(--val-head-height);
  background-color: var(--color-menu-background);
}

This happens here, but I want space from right.

Upvotes: 0

Views: 133

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

Alternatively you can use width: calc(100% - value) or just set padding of the parrent (.content { padding-right: 32px; })

/* The header to search and navigate on. */
.topbar-header {
  box-sizing: border-box;
  position: relative;
  width: calc(100% - 64px);
  height: 48px;
  margin-right: 256px;
  background-color: tomato;
}
<body>
  <div class="content" id="id_content">
    <div class="topbar-header">
      <input type="text" class="topbar-field" style="min-width: 300px; max-width: 600px; width: 30%;">
    </div>
  </div>
</body>

Upvotes: 1

Related Questions