CODEWITHSUNDEEP
htmlcss
user2736052
user2736052

Reputation:

<ul> with absolutely positioned <li> not adjusting the parent <div> height

I've done a fair bit of reading on this, and haven't seen an answer that I can get to work. Is it possible to make the parent div height adjust to the height of the absolutely positioned list-item ?

For now, I've compensated by adding large amount of margin.. real large.. but that is not the correct solution here.

The html looks like this: Simple..

<div class="home-section products">
  <div id="gallery-container">
    <ul>
      <li class="one"><img src="showcase-five.jpg"></li>
      <li class="two"><img src="showcase-four.jpg"></li>
      <li class="three"><img src="showcase-one.jpg"></li>
      <li class="four"><img src="showcase-three.jpg"></li>
      <li class="five"><img src="showcase-two.jpg"></li>
    </ul> 
  </div>
</div>

I need the li height to make the .home-section adapt to its height.

If posting a link to the development site is allowed, I'd be happy to share it and allow you to inspect the code in question.

Thanks

Upvotes: 2

Views: 472

Answers (1)

Jeff Rupert
Jeff Rupert

Reputation: 4840

In short, no.

An absolutely positioned item is outside of the standard document flow and will not be able to affect the height of any parent element, nor will it be able to change the location of any siblings.

You could theoretically do this with Javascript if you need to keep the <li>'s position: absolute;

Upvotes: 5

Related Questions