Relative positioning with height based on content problems

Question

Hello I'm trying to achieve this

So in this case you can see, we have 3 divs. Top one will have a width of 100% and an height:auto. Also will be relative positioned of course.

Second one the same, but in this case I'll add a dummy text that will define the height of the div.

And the 3rd one just like the first one, the problem is that, they're not alinged. Not one before the other. Could someone tell me what is wrong with my code? Thanks

#block1 {
  position:relative;
  width:100%;
  height:auto;
  background-color: blue;
}

#img1 {
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  transform:translate(-50%);
  -webkit-transform:translate(-50%);
}

#block2 {
  position:relative;
  width:100%;
  height:auto;
  background-color: orange;
}

.dummytext {
  font-family: 'Ralleway, sans-serif';
  font-size: 20px;
  text-align: justify;
  margin:10px;
}

#block3 {
  position:relative;
  width:100%;
  height:auto;
  background-color: brown;
}

#img2 {
  width:100px;
  height:90px;
  position:absolute;
  left:50%;
  transform:translate(-50%);
  -webkit-transform:translate(-50%);
}

<div id="block1">
  <img src="images/img1.png" id="img1"/>
</div>

<div id="block2">
  <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3>
</div>

<div id="block3">
  <img id="img2" src="images/img2.png"/>
</div>

Could someone help me to understand?

Answer 1

Your elements aren't showing, due to having set the property position on them. To make this work, add table elements around the img tags and set the margin: auto property on them.

#block1 {
  width: 100%;
  height: auto;
  background-color: blue;
}
#img1 {
  width: 100px;
  height: 100px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
#block2 {
  width: 100%;
  height: auto;
  background-color: orange;
}
.dummytext {
  font-family: 'Ralleway, sans-serif';
  font-size: 20px;
  text-align: justify;
  margin: 10px;
}
#block3 {
  width: 100%;
  height: auto;
  background-color: brown;
}
#img2 {
  width: 100px;
  height: 90px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
table {
  margin: auto;
}

<div id="block1">
  <table>
    <tbody>
      <tr>
        <td>
          <img id="img1" src="images/img1.png"></td></tr></tbody><table>
</div>

<div id="block2">
  <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3>
</div>

<div id="block3">
  <table>
    <tbody>
      <tr>
        <td>
          <img id="img2" src="images/img2.png"></td></tr></tbody><table>
</div>

Answer 2

This is because your image is abolutely positioned, which won't contribute to the size of the container. You should remove the absolute position of the image.

Try this:

div {
  text-align: center; /* center everything inside the divs */
}
#block1 {
  width: 100%;
  height: auto;
  background-color: blue;
}
#img1 {
  width: 100px;
  height: 100px;
}
#block2 {
  width: 100%;
  height: auto;
  background-color: orange;
}
.dummytext {
  font-family: 'Ralleway, sans-serif';
  font-size: 20px;
  text-align: justify;
  margin: 10px;
}
#block3 {
  width: 100%;
  height: auto;
  background-color: brown;
}
#img2 {
  width: 100px;
  height: 90px;
}

<div id="block1">
  <img src="images/img1.png" id="img1" />
</div>

<div id="block2">
  <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3>
</div>

<div id="block3">
  <img id="img2" src="images/img2.png" />
</div>

Answer 3

You don't need to use absolute positioning to accomplish this. It is easier (and safer) to use the default static positioning and center things using margin: 0 auto like so:

#block1 {
width:100%;
background-color: blue;
}

#img1 {
height: 100px;
width: 100px;
margin: 0 auto;
}

#block2 {
width:100%;
background-color: orange;
}

.dummytext {
font-family: 'Ralleway, sans-serif';
font-size: 20px;
text-align: justify;
margin:10px;
}

#block3 {
width:100%;
background-color: brown;
}

#img2 {
width:100px;
height:90px;
margin 0 auto;
}

This is the most standard solution for achieving the layout you want.

Answer 4

To control the layout of your divs you should give them a display property. Try adding display: table-row; for each block