CSS and HTML - How to make divs not overlap?

Question

So, I'm trying to make a photo gallery in the middle of my screen using percentages, the image ends up in the center and function ok with the jquery to change images, without a problem, but the image div ends up overlaying the div that contains the gallery name, how do I make the gallery div fixed using percentages?

Here is the fiddle: https://jsfiddle.net/52gwc0j2/

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div> 
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

Answer 1

As others have mentioned, using absolute positioning for you images is pointless - it will make things much harder. However, you can make use of the fact that absolute elements can be placed behind other elements without pushing the contents. My proposal is to simply have one single class that will tell which image you are currently displaying. The displayed image will have a relative position and the others will have an absolute position, allowing the images to appear in the same top-left hand corner, but for some to be obscured and others to be visible.

The main advantage of the approach below is that your images scale your box is you want to, and the photoset can be placed inline, in the document flow, as an overlay, etc... It's very versatile so give it a try. This also means that your javascript becomes lighter and easier as all you need to do is add the right class to the image to display it. You can also still add a relative box with a title in in, and it will work just fine.

// Don't worry about this, its just a quick implementation to make your photos rotate
var ps = Array.prototype.slice.call(document.querySelectorAll('.photoset')).forEach(function(set){
  var all = Array.prototype.slice.call(set.querySelectorAll('img'));
  var index = 0;
  setInterval(function(){
    all[index].className = '';
    index = index + 1 >= all.length ? 0 : index + 1;
    all[index].className = 'active';
  },1000)
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.body {
  height: 100%;
  width: 100%;
}

.photoset {
  box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
  overflow: hidden;
  width: auto;
  display: inline-block;
}

#absolute-photoset {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 80%;
  max-height: 80%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}

.photoset img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  display: block;
}

.photoset img.active {
  position: relative;
  opacity: 1;
}

<div class="photoset" id="absolute-photoset">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

<h1>My Title</h1>
<div class="photoset" id="inline-photoset">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<p>The above photoset seems to be pushing this text down as expected!</p>

This photoset class also pushed contents out of it's way if it is not positioned absolute, which I guess is what you are looking for. You can also resize the .photoset and the image inside should follow (I am unsure if the max-width will change the proportions of the image, if so, use only one-directional max values, like just max-width).

The main advantage is that you can treat the .photoset as a box and not worry about its contents, so now you can use it inline, absolutely positioned, fixed, etc...

Answer 2

Instead of using a height for your photoset use padding-bottom: 50%; and mess with the percentage until you get the height you want. Then set the image to have a height of 100% and a width of 100% instead of top, left, right, bottom.

here is a fiddle Fiddle

Answer 3

As @rac said, the height of .photoset is 0 because its children are absolutely positioned.

To get around this with the minimal amount of code change, update your selector from .photoset img to .photoset img + img. This will only target images placed after an image. What this results in is your first image sets the height of .photoset, and all subsequent images are overlaid on top.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img + img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div> 
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

Answer 4

My proposal is to change the photoset img position property to relative:

$(function () {
  $('.photoset').each(function(){
    $(this).data('counter', 0);
  });

  var showCurrent = function (photoset) {
    $items = photoset.find('img');
    var counter = photoset.data('counter');
    var numItems = $items.length;
    var itemToShow = Math.abs(counter % numItems);
    var width = $(window).width;

    $items.fadeOut(1000);

    //Adjust orientation - Portrait or Landscape
    if (($items.eq(itemToShow).width() / $items.eq(itemToShow).height()) > 1) {

      photoset.css({
        width: "52%",
        height: "69%"
      });
    } else if (($items.eq(itemToShow).width() / $items.eq(itemToShow).height()) < 1) {
      photoset.css({
        width: "23%",
        height: "69%"
      });
    }
    $items.eq(itemToShow).fadeIn(1000);
  };

  $('.photoset').on('click', function(e) {
    e.stopPropagation();
    var photoset = $(this);
    var pWidth = photoset.innerWidth();
    var pOffset = photoset.offset();
    var x = e.pageX - pOffset.left;
    if (pWidth / 2 > x) {
      photoset.data('counter', photoset.data('counter') - 1);
      showCurrent(photoset);
    } else {
      photoset.data('counter', photoset.data('counter') + 1);
      showCurrent(photoset);
    }
  });
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
  position:relative;
  width: 52%;
  height: 69%;
}

.photoset img {
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
        Photoset Header
    </div>
</div>
<div class="photoset center-block">
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>