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

How to vertically center a div using CSS

Is there a way to utilize local resources in case CDNs are unable to load properly?

How to use Javascript, HTML5, and AngularJS to display and print a PDF document within a

Is there a way to adapt my existing navigation bar to collapse on smaller devices?

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

What is the best method for choosing HTML "ids" that are generated automatically by DevExpress controls using JavaScript DOM manipulation?

Step-by-step guide to showing a div upon clicking an element using jQuery

Troubles with Bootstrap's navbar dropdown menu functionality

Navigating to the appropriate section by clicking on a navbar item with Bootstrap 5: A step-by-step guide

Tips for organizing unordered list items into columns, with the text aligned at the top

Press the toggle button to switch the image display

Disable the click event using jQuery

Formatting an HTML table for mobile devices

The modal remains closed: Error - Attempting to access property 'open' of undefined

Can BeautifulSoup be utilized to retrieve CSS from a webpage?

Steps for inserting new text in front of an element's existing text

Update the content of a div element without having to fetch an external file

Function activation in Element requires a double click to initiate

Design an arrangement using div elements and CSS styling

Using jQuery, learn how to successfully call a selector from dynamic content