根据两个元素的重叠宽度动态设置左填充

Question

I've got a responsive site I'm building Where I have two elements that overlap each other. THe size of the elements will change depending on the browser width as will the overlap and consequently I need to set left-padding on the right element dynamically.

I'm unsure of how to proceed with this. Have set up a Fiddle here .

html:

    <div class="container">

<div class="row copy intro">
            <section class="red">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum nobis ullam neque, harum, magni. Reprehenderit veritatis in deleniti incidunt dolore dolores ex id expedita.</p>
                <p>Corporis soluta ducimus ut quasi libero nesciunt, eligendi autem, consequatur error sapiente labore, officia tempora in voluptas non deleniti veniam officiis, quis vero consequuntur quia!</p>


            </section>

            <section class="white">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum nobis ullam neque, harum, magni. Reprehenderit veritatis in deleniti incidunt dolore dolores ex id expedita.</p>

                <p>Corporis soluta ducimus ut quasi libero nesciunt, eligendi autem, consequatur error sapiente labore, officia tempora in voluptas non deleniti veniam officiis, quis vero consequuntur quia!</p>

            </section>
    </div>
</div><!--container-->

css:

/* line 3, ../build/sass/_intro.scss */
.intro {
  background: #0079c2;
  position: relative;
  padding: 15px;
  padding-bottom: 150px;
}
/* line 9, ../build/sass/_intro.scss */
.intro section {
  position: relative;
  padding: 100px;
  width: 60%;
  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;
}

/* line 26, ../build/sass/_intro.scss */
.intro section.red {
  background: rgba(238, 45, 36, 0.85);
  color: #fff;
  z-index: 200;
}
/* line 31, ../build/sass/_intro.scss */
.intro section.red h1 {
  font-size: 24px;
}

/* line 45, ../build/sass/_intro.scss */
.intro section.white {
  background: #fff;
  color: #0079c2;
  position: absolute;
  top: 150px;
  right: 15px;
}

js:

// set intro sections width = height
$(document).ready(function() {
  var circleWidth= $('.intro section.red').outerWidth();

  $('.intro section').css('min-height', circleWidth + 'px');
  $('.intro section.white').css('width', circleWidth + 'px');
});

Thank you for your time.

Answer 1

Use % for padding and adjust accordingly. See this revised Fiddle for an example.

The revised Fiddle comments out:

$('.intro section.white').css('width', circleWidth + 'px');

Fixing the width of the white circle means that it is not responsive any more. If you need to do that for some reason, you would have to make adjustments.

Answer 2

Here's a JSFiddle doing what I think you want: http://jsfiddle.net/6yro5vhx/2/

Basically I user offset() & outerWidth() on the two elements to work out the overlap, and then call calculatePadding() function on documentready & resize events.

  function calculatePadding() {
   var white = $('.intro section.white');
   var red = $('.intro section.red');
   var extraPadding = 20;
   var distanceLeft = white.offset().left;
   var redDistanceRight = red.offset().left + red.outerWidth();
   var paddingLeft = (redDistanceRight - distanceLeft) + extraPadding;

   $('.intro section.white').css('padding-left', paddingLeft + 'px');    
  }

Update the answer below mine is a far better way to achieve what you're looking for. CSS is a much better responsive approach than excess JQuery.