CODEWITHSUNDEEP
htmlcss
nsilva
nsilva

Reputation: 5622

CSS - Fixed background width to stay inside container

Is this possible?

Basically I have the following:-

HTML

<div id="wrapper">
<a href="https://bookings.planetbouncetrampolinepark.com/JumpBookings/BookSession.aspx?site=1&amp;group=1">
  <div class="btn-book book-now-merge" style="color: rgb(0, 0, 0); z-index: 6;">
    <span class="txt-plan" style="display: none;">plan your jump</span>
    <br>
    <span class="txt-book" style="top: -25px; background: url(&quot;/wp-content/themes/planetbounce/assets/img/txt-book-now.png&quot;);"></span>
    <span id="glim-block" style="height: 0px;">
                                <span class="book-now-glimmer" style="left: 310px; display: block;">
                                </span>
    </span>
  </div>
  <span class="book-now-shadow-default" style="display: none;"></span>
  <span class="book-now-shadow" style="display: none; opacity: 0;"></span>
</a>
</div>

CSS

#wrapper {
  width: 600px;
  height: 1000px;
  background: #ececec;
}

.book-now-merge {
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/book-now-merge.png);
  height: 54px;
  width: 278px;
  background-size: 278px 54px;
  position: fixed;
  top: 73px;
  right: 0;
  z-index: 5;
}

Here is the JSFIDDLE.

I basically always want .book-now-merge to always align right of the #wrapper div but as a fixed position so it stays with you as you scroll down the page, any ideas how I can achieve this?

Upvotes: 0

Views: 48

Answers (3)

KiwixLV
KiwixLV

Reputation: 246

Try adding float:right to your <a> element and remove right: 0 from .book-now-merge.

EDIT: If you need .book-now-merge inside of wrapper, just add margin-left: -278px

JSFiddle

Upvotes: 0

Johannes
Johannes

Reputation: 67799

Since both the #wrapper and .book-now-merge have a fixed width, you can take the width of #wrapper (600px), subtract from that the width of .book-now-merge (278px) and use the resulting 322px as the left parameter of the fixed positioned .book-now-merge element:

https://jsfiddle.net/f7wy5vh4/

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

#wrapper {
  width: 600px;
  height: 1000px;
  background: #ececec;
}

.book-now-merge {
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/book-now-merge.png);
  height: 54px;
  width: 278px;
  background-size: 278px 54px;
  position: absolute;
  top: 73px;
  right: 0;
  z-index: 5;
}

DEMO HERE

Upvotes: 0

Related Questions