CODEWITHSUNDEEP
htmlcsscss-positionpositioning
nrweb
nrweb

Reputation: 221

Applying Max-Width to a Fixed-Positioned Div Within a Relative-Positioned Div?

What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?

Update (Jan 24, 2018): I've answered this question with the solution. See here.

See the following snippet for further reference:

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  background: blue;
  float: right;
  color: white;
  text-align: center;
  right: 0;
}
<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Upvotes: 1

Views: 2922

Answers (3)

nrweb
nrweb

Reputation: 221

Figured something out. It can be done after all!

body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}

.max-width {
  max-width: 500px;
  height: 2000px;
  margin: auto;
  background-color: lightgrey;
  position: relative;
}

.box1 {
  position: relative;
  width: 20%;
  height: 100px;
  background-color: yellow;
  text-align: center;
}

.container {
  position: absolute;
  width: 60%;
  background-color: purple;
  height: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}

.wrap-box {
  position: fixed;
  max-width: 500px;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.wrap-box > div.box2 {
  width: 20%;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

.wrap-box > div.box3 {
  width: 20%;
  height: 100px;
  background-color: green;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
}
<div class="max-width">
  <div class="box1">position: relative, width: 20%</div>
  <div class="container">
    position: absolute, width: 60%
    <div class="wrap-box">
      <div class="box2">position: fixed (top), width: 20%</div>
      <div class="box3">position: fixed (bottom), width: 20%</div>
    </div>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67774

A fixed element's position is always relative to the viewport/window, never to any other element.

The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.

Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to @MrLister for that)

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  top: 0;
  right: calc(50% - 250px);
  background: blue;
  float: right;
  color: white;
  text-align: center;
}

@media (max-width: 500px) {
  .box {
    right: 0px;
  }
}
<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Upvotes: 3

Dev Bunker
Dev Bunker

Reputation: 127

What if you did this:

Css

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  top: 0;
  right: calc(50% - 250px);
  background: blue;
  float: right;
  color: white;
  text-align: center;
}

@media screen and (max-width: 500px) {
.box {
      right: 0;
    }
}

@media screen and (min-width: 501px) {
.box {
      width: 100px; /* 100px is 20% of the max-width */
    }
}

Html

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Upvotes: 0

Related Questions