Giving absolute items auto height

HTML & CSS
1

Hi,

I have some elements that are absolutely positioned. I am trying to add a div under them so it starts after the height of the absolute elements finish, but I can’t work it out. I have tried adding a min-height, but it create a lot of space when scaling down/responsively.

Is there a way I can start an element after the absolutely positioned items?

This is a fiddle:

2

Hi there toolman,

I can see no good reason to use position: absolute for this task. :unhappy:

Here is a very simple example that uses extremely basic display: flex …

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
#flex-container {
    display: flex;
 }
#flex-container > div {
    width: 33.333%;
    padding: 1em;
 }
#flex-container > div img  {
    display:inline-block;
    width: 75%;
    height:auto;
    border: 1px solid #000;
 }
#flex-container > div:nth-of-type( 2 ){
    text-align: center;
 }
#flex-container > div:nth-of-type( 3 ){
    text-align: right;
 }
#content {
    padding:2em;
    border: 1px solid #999;
    background-color: #fff;
 }
@media (max-width:30em ) {
#flex-container {
    display: block;
 }
#flex-container > div {
    width: 100%;
    padding: 1em;
    text-align: center;
 }
#flex-container > div:nth-of-type( 3 ){
    text-align: center;
 }
 }
</style>

</head>
<body>
 <div id="flex-container">

  <div>
   <img src="https://via.placeholder.com/648x400?text=left" width="648" height="400" alt="">
   text
  </div>

  <div>
   <img src="https://via.placeholder.com/648x400?text=middle" width="648" height="400" alt="">
   text
  </div>

  <div>
   <img src="https://via.placeholder.com/648x400?text=right" width="648" height="400" alt="">
   text
  </div>

<!-- #flex-container --></div>

 <div id="content">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
   Curabitur sit amet sem sed libero bibendum tempus faucibus       
   quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
   nibh, posuere ac lorem ut, suscipit tincidunt leo.
  </p>
 </div>
 

</body>
</html>

coothead

2 Likes
3

Thanks, but the reason I used absolute was to have the middle image have a negative top margin. Is there another way to achieve this using absolute positioning and having the height auto?

4

That is not a reason to use “position: absolute” . :unhappy:

In the code that I presented, this addition to the CSS…

#flex-container > div:nth-of-type( 2 ) img {
    margin-top: -50%;  /* adjust value  to suit */
 }

…will produce a marvellous negative “top-margin” . :winky:

And this in the @media rules…

#flex-container > div:nth-of-type( 2 ) img {
    margin-top: 0;
  }

…will restore the status quo . :biggrin:

coothead

3 Likes
5

Thanks. It worked. The idea with the absolute positioning was to have the middle image on top of the others so it had an overlapping effect, but i can play around with it.

Thanks again

6

Again, not a reason for absolute. Relative positioning can create overlapping effects.

As a general rule, don’t use absolute unless you absolutely need to and absolutely know what you are doing with it. It will likely cause more problems than it solves when used unwisely.

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.