Home/ Questions/Q 8138331
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:27:31+00:00

I am wondering how it is possible to place a div box (that I

  • 0

I am wondering how it is possible to place a div box (that I want to place an image in) so it appears over the top of another div in the center bottom.

enter image description here

I am trying the following code:

<html>
<body>
<style type="text/css">
.outer {
    width: 350px;
    height: 350px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
<div class="outer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque, neque ut ultrices posuere, velit arcu aliquam dui, id rutrum justo leo nec purus. Donec aliquet justo a est iaculis id porta nulla pulvinar. Proin quis turpis vitae augue volutpat volutpat. Donec volutpat accumsan urna, id vulputate augue euismod eu. In vitae libero tortor. Integer lacinia, turpis vel egestas ornare, nisi libero tempus orci, non imperdiet erat nulla malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
   <div class="inner"></div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A combination of absolute positioning and auto margins on the inner div will work. You also need to set position to relative for the outer div

    .outer {
  width: 350px;
  height: 350px;
  position: relative;
  border: 1px solid black;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* both left AND right must be set to 0 */
  margin: 0 auto;
}​

    jsFiddle DEMO

    • 0