1

Sorry, it's late here and I can't figure this out...

I have a responsive div, split into two vertically. These are set to display inline, side-by-side horizontally:

[1][2]

unless the viewport shrinks below 400px wide, then they stack vertically - like this:

[1]
[2]

This works fine until I add a second set:

[1][2]
[3][4]

then, when the viewport shrinks below 400px wide, [2] gets hidden behind [3]:

[1]
[3]
[4]

Here's a demo that's clearer: http://jsfiddle.net/c14n6ym4/. I'm missing something, can anyone help? Thanks for your time.

CSS:

.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 40%;
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
#left,
#right {
font-family: serif;
font-size: 20vw;
display: inline-flex;
width: 50%;
height: 100%;
float: left;
}
@media (max-width: 400px) {
#left,
#right {
font-size: 40vw;
width: 100%;
}
.wrapper:after {
padding-top: 80%;
}
}
Suresure
  • 143
  • 11
  • 2
    Removing `position:absolute` from the `.main` class fixed it for me.. http://jsfiddle.net/pwm4hjj6/ – Pete Dec 07 '15 at 23:57
  • 1
    You shouldn't have the same `id` for multiple elements. Use `class`es for `right` and `left`. – Jonathan Lam Dec 07 '15 at 23:58
  • Thanks @Jonathan, I'll update. Thanks @Pete - that solves the overlay, but `position:absolute` is there to preserve the aspect ratio (http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio) and without it the divs seem to have a height of 100%... – Suresure Dec 08 '15 at 00:08

2 Answers2

2

Removing position:absolute from the .main class fixed it for me.. jsfiddle.net/pwm4hjj6

Pete
  • 895
  • 1
  • 6
  • 13
1

Update your markup structure and change your id's to classes.

http://jsfiddle.net/partypete25/c14n6ym4/1/

<div class="wrapper">
  <div class="main">
    <div class="left">
      <p>1</p>
    </div>
    <div class="right">
      <p>2</p>
    </div>
    <div class="left">
      <p>3</p>
    </div>
    <div class="right">
      <p>4</p>
    </div>    
  </div>
</div>
partypete25
  • 4,353
  • 1
  • 17
  • 16
  • Ah, thanks very much! I was worried removing that `inline-block` from the `wrapper` would cause a problem but it looks just fine - cheers. – Suresure Dec 08 '15 at 00:26