inline block element actually appearing underneath other element

Question

i have a small div appearing alongside another div of variable height - and i have noticed that if the div of variable height is not a single image or contains more than one line of text, the smaller div appears underneath the larger. it's literally been haunting me for like a week now, my css is

i have tried vertical align top and most other suggestions i found on stackoverflow and nothing has worked. please help!

(i'm coding this for tumblr which has it's own tag system, that's why the div content is of variable height and media content, but the jsfiddle below has some text entered to demonstrate the bug. also i realise there's a lot of divs, but that's because on the permalink page the css changes for each element)

#postcontainer {
  display: block;
  position: absolute;
  width: 600px;
  border: 1p/x solid #eeeeee;
  margin-left: 20%;
  margin-top: 5%;
}
.nonphoto {
  width: 450px display: inline-block;
  margin-bottom: 50px;
}
.postinfo {
  border: 1px solid #eeeeee;
  width: 10px;
  height: 10px;
  padding: 2px;
  background-color: #eeeeee;
  position: absolute;
  display: inline-block;
  margin-left: 15px;
  transition: 0.5s;
}
.postinfo div {
  opacity: 0;
  font-size: 10px;
  transition-duration: 0.2s;
}
.postinfo:hover {
  width: 35px;
  height: 55px;
  padding: 5px;
  transition: 0.5s;
}
.postinfo:hover div {
  opacity: 1;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}

<div id="postcontainer">
  <div class="nonphoto">
    <p>text text text</p>
    <p>text text</p>
    <p>text text text text text</p>
    <div class="postinfo">
      <div>
        date source via
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/g0rsL2ev/

You need to put enough code to reproduce the problem **into the question itself**. — Quentin, Jul 31 '15 at 13:18
there actually aren't any divs "alongside" each other, just a bunch of nested divs within each other. That could be part of your problem. What two parts in your fiddle should be next to each other? — deebs, Jul 31 '15 at 13:27

score 0 · Answer 1 · edited May 23 '17 at 12:32

There were a few things wrong. You were missing the ; after your 450px width on nonphoto class. Also, with the postinfo class... position absolute and inline-block don't work well together (see answer here CSS: display:inline-block and positioning:absolute). Then you have to add vertical-align: top to nonphoto and postinfo. Now you may still need to adjust padding to your liking as well: https://jsfiddle.net/jcchs9ov/1/

    #postcontainer {
      display:block;
      position:absolute;
      width:600px;
      border:1px solid #eeeeee;
      margin-left:20%;
      margin-top:5%;
    }
   .nonphoto {
      width:450px;
      display:inline-block;
      margin-bottom:50px;
      vertical-align: top;
    }
    .postinfo {
      border:1px solid #eeeeee;
      width:10px;
      height:10px;
      padding:2px;
      background-color:#eeeeee;
      display:inline-block;
      margin-left:15px;
      transition:0.5s;
      vertical-align: top;
    }
   .postinfo div {
      opacity:0;
      font-size:10px;
      transition-duration:0.2s;
   } 
   .postinfo:hover {
      width:35px;
      height:55px;
      padding:5px;
      transition:0.5s;
    }
    .postinfo:hover div {
      opacity:1;
      transition-duration:0.5s;
      transition-delay:0.5s;
    }

inline block element actually appearing underneath other element

1 Answers1