Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2015
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 responsive divs overlapping keeping aspect ratio.

    Hi

    I was wondering if anyone could help me.

    I have two responsive sliders. I want to place Slider 2 over Slider 1, but postition it at the bottom of Slider 1 div.

    Slider 1 div height is max 350px, and slider to 2 is max height of 110px. So slider 2 will overlap slider 1 but sit at the bottom.
    I have set this up so you can see the layout of HTML.
    https://codepen.io/anon/pen/RVaRXm

    The following css works for full width but not responsively. Percentages doesn't work either.
    .slider2 {
    top: -110px
    }

    The sliders maintain aspect ratio after 1240px width.

    I could do it in a messy way but am interested how someone else would solve it in a hopefully cleaner way to my version!!

    Hope that makes sense? Can any one please help?

    Many thanks.

  2. #2
    Regular Coder
    Join Date
    Feb 2016
    Posts
    712
    Thanks
    0
    Thanked 145 Times in 143 Posts
    Unfortunately I don't understand this completely:
    - In your codepen the divs are placed on top of each other, there is no overlap.
    - I don't understand the benefit of overlapping.

  3. #3
    New Coder
    Join Date
    Mar 2011
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    the overlap bit is what I need help with. The sliders are two separate divs and thats how the html is structured (as on codepen).
    Thats how its been designed...

  4. #4
    Regular Coder
    Join Date
    Feb 2016
    Posts
    712
    Thanks
    0
    Thanked 145 Times in 143 Posts
    I want to place Slider 2 over Slider 1, but postition it at the bottom of Slider 1 div.
    This can be done by positioning Slider 2 absolutely and placing it at the bottom:
    Code:
    .wrapper {
      position: relative; /* added */
    }
    .slider1 {
    	width: 100%;
    	height: 350px;
    	background: #D9D5EA;
    	position: relative;
    	padding: 20px;
    	box-sizing: border-box;
    	text-align: center;
    	font-size: 20px;
    	border: 1px solid #333
    }
    .slider2 {
    	width: 100%;
    	height: 110px;
    	background: #92FCFE;
    	position: absolute; /* added */
            bottom: 0px; /* added */
    	padding: 20px;
    	box-sizing: border-box;
    	text-align: center;
    	font-size: 20px;
     }
    Hope this is what you need.

  5. #5
    New Coder
    Join Date
    Mar 2015
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Brilliant thanks for your help!! : )


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •