user2742409 user2742409 - 2 months ago 16
CSS Question

Position div behind overlapping div

I've got the following setup http://jsfiddle.net/47x60k4w/529/.

HTML

<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>


The
inner_block
should overlap the
header
class and the footer should be placed right behind the
inner_block
.

In my solution I just don't get the footer behind the
inner_block
without doing not responsible stuff like calling a
margin-top
with x.xem on it. I just found some links with
z-index
stuff which didn't worked for me because the
inner_block
lost his passed height and width from the nested block.

The result should look like this beautiful mockup.
enter image description here

Do you have any ideas?

Thanks in advance.

Answer

So I made the following changes to your code:

  1. Remove the position: absolute for the inner-block.

  2. As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.

    .inner_block:after {
      content: '';
      display: block;
      clear: both;
    }
    

    Whenever using floats, remember to clear it.

  3. Added position: relative to the inner_block to position it over the header and footer.

  4. Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).

  5. Also tinkered a bit with the margins and widths to achieve the layout.

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block {
  position: relative;
  /*width: 100%;*/
  border: solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top: -2.5%;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
  background-color: white;
}
.inner_block:after {
  content: '';
  display: block;
  clear: both;
}
.column {
  max-width: 30%;
  float: left;
  margin-right: 2.5%;
}
.column:first-child{
    margin-left: 2.5%;
 }
.column:last-child{
    margin-left: 0;
 }
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}
<div class="header">

</div>
<div class="inner_block">
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
  </div>
</div>
<div class="footer">
  test
</div>

Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!

Alternate Solution:

So here is a solution using a flexbox which is easier to set up:

First remove the floating container and the clearfix.

Now Wrap the inner_block with another div

.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}

Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}
<div class="header">

</div>
<div class="inner_block_wrapper">
  <div class=" inner_block ">
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
    </div>
  </div>
</div>
<div class="footer ">
  test
</div>

Comments