Challenges of relative positioning with dynamic height based on content

Question

Challenges of relative positioning with dynamic height based on content

Hello! I'm trying to achieve this https://i.stack.imgur.com/Q6lXP.png

In this case, there are 3 divs. The top one will have a width of 100% and a height of auto, with relative positioning.

The second div is similar, but I plan to add some dummy text to define its height.

Lastly, the third div is also like the first one, but for some reason they are not aligned properly. They do not appear one after the other as intended. Could someone take a look at my code and help me understand the issue? Thank you.

html css

Answer 1

Answer №1

The reason for this issue is that the image is absolutely positioned, which does not affect the size of the container. The solution is to remove the absolute positioning of the image.

Here is a suggestion:

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 Ex...

Answer 2

The reason for this issue is that the image is absolutely positioned, which does not affect the size of the container. The solution is to remove the absolute positioning of the image.

Here is a suggestion:

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 Ex...

Answer 3

Answer №2

Your elements are not displaying because the position property has been set on them. To resolve this issue, wrap the img tags with table elements and apply the margin: auto property to 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, 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 4

Your elements are not displaying because the position property has been set on them. To resolve this issue, wrap the img tags with table elements and apply the margin: auto property to 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, 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 5

Answer №3

If you want to manage the arrangement of your divs, consider assigning them a display property. Experiment with incorporating display: table-row; for every block

Answer 6

If you want to manage the arrangement of your divs, consider assigning them a display property. Experiment with incorporating display: table-row; for every block

Answer 7

Answer №4

There's no need to rely on absolute positioning for this task. A simpler and safer approach is to use the default static positioning and center elements using margin: 0 auto as demonstrated below:

#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 method represents the standard solution to achieve the desired layout.

Answer 8

There's no need to rely on absolute positioning for this task. A simpler and safer approach is to use the default static positioning and center elements using margin: 0 auto as demonstrated below:

#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 method represents the standard solution to achieve the desired layout.

Challenges of relative positioning with dynamic height based on content

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible for CSS div to have a height of 100% when placed within fluid parents

Modify the length of an array using a number input field

Bring to life the div that has been clicked

Conceal the scrollbar track while displaying the scrollbar thumb

Unsuccessful conversion of JSON data to HTML using json2html in Python

Ways to interact with elements lacking an identifier

How can I eliminate the black outline added to text by IE CSS filter?

"Utilizing HTML aids for creating text input fields and adding line breaks

Set the div to have a position of absolute, disregarding any other parent divs that may also have position absolute set

What is the best way to reference a div link from a different PHP file?

Using local storage with github sites can lead to some unexpected and peculiar behavior

Managing class values with Selenium - Manipulating and updating classes

Conceal Choices During Search using jQuery Select2

Are the references to clip-path: path() on MDN and other sources inaccurate?

Guide to dynamically altering the header logo as you scroll further

Create a stylish layout with two div elements positioned side by side using flexbox for a responsive design

Please explain the display property used in Bootstrap input groups

Problem with stacking order in Internet Explorer 7

What is the best way to incorporate an input bar in a Bootstrap panel header?

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top