Question

I have the following HTML code:

  <div class="outer_container">
     <div id="imgContainer">
       <img src="/some/image" />              
     </div>

     <div id="slogan">
       <span class="quote">Some text here</span>
     </div>

     <div id="footer" class="gray_top_border">
       Some text here
     </div>
  </div>

And this is my CSS:

.outer_container {
  background-color:#FFFFFF;
  margin:0 auto;
  width:960px;
}

#slogan {
  font-size: 3em;
  position: relative;
  z-index: 999;
  bottom: 50px;
  left: 50px;
}

#footer {
  border-top:1px solid #B5B5B5;
  min-height:50px;
  padding:10px;
}

Using this code, I get a 3em gap between image and footer.
If I change position from relative to absolute, the gap problem is gone. But then the top / left position is relative to the browser window, and not within the DIV container.

How can I float text over the image without creating this gap?

Answer 1

This does it:

#slogan {
  font-size: 3em;
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 999;
  bottom: 50px;
  left: 50px;
}