CODEWITHSUNDEEP
css
Paul de Koning
Paul de Koning

Reputation: 532

How do I make CSS take into account a sidebar with absolute positioning

Im having a hard time whilst trying to learn CSS. I cant seem to figure out how to make the relative positioned div take into account the absolute positioned div's text.

This is my code:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    position: relative;
    width: 600px;
    height: 100%;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 0px;
    right: 1;
    width: 100px;
    height: 100%;
    border-right: 3px solid #73AD21;
}
</style>
</head>
<body>


<center>
<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>
</center>

</body>
</html>

How do I make it so that the lines expand till the end of the text in the sidebar?

Thanks

Upvotes: 1

Views: 3457

Answers (1)

user4447799
user4447799

Reputation:

Just like the comments mention, it is indeed not possible for the parent element to adjust its height to contain the child, if the child is absolutely positioned.

If the relative and absolute positioning is not a must, then you can achieve this effect using float or flexbox.

Using float property: 

div.relative {
  width: 600px;
  height: 100%;
  border: 3px solid #73AD21;
  overflow: auto;
}

div.absolute {
  float: left;
  width: 100px;
  border-right: 3px solid #73AD21;
}
<center>
  <div class="relative">This div element has position: relative;
    <div class="absolute">This div element has position: absolute;</div>
  </div>
</center>

Using flex-box property: 

div.relative {
  width: 600px;
  height: 100%;
  border: 3px solid #73AD21;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

div.absolute {
  width: 100px;
  border-right: 3px solid #73AD21;
}
<center>
  <div class="relative">This div element has position: relative;
    <div class="absolute">This div element has position: absolute;</div>
  </div>
</center>

If there needs to be other elements on the right side, you will need to wrap all of them inside another container.

Upvotes: 2

Related Questions