How to have Parent (relative) expand according to a Child (absolute) div

1 Views

I understand similar questions have been asked multiple time, I’ve tried their solutions tailored to my code but none of them seem to work. My website has a header with a div inside of it containing a WordPress Contact Form 7 form. The whole site is responsive, other than the Contact form div which stays it’s height (not fixed) and doesn’t decrease in height – only width. Below is the code. #imgDiv is the parent and #property-search is the child div. #property-search is the div that only decreases in width and not height. 

#imgDiv { position: relative; width: 100%; overflow: auto;}
#imgDiv img { width: 100%; }
#property-search { position: absolute;top: 0; margin-left: 450px; min-width: 18%; background-color: rgba(23, 81, 61, 0.5); overflow: auto; margin-right: 450px;}

EDIT: I understand that positioning absolute will result in the child div not changing in height relative to it’s parent. Hence, I’m looking for a way round this, rather than to be educated on the use of absolute and relative position. Thanks!

Post Views: 1

Related posts

1 comment

  1. Not sure what the need for the absolute positioning is for but if it only to put your text on top of your image, why not just make your image a background-image?

    #imgDiv {
  width: 100%;
  overflow: auto;
  background:url(http://lorempixel.com/1000/1000/city/1/) top center no-repeat;
  background-size:cover;
}
#property-search {
  margin-left: 450px;
  min-width: 18%;
  background-color: rgba(23, 81, 61, 0.5);
  overflow: auto;
  margin-right: 450px;
}
    <div id="imgDiv">
  <div id="property-search">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate vehicula nisl, vel cursus dolor euismod ut. Praesent ullamcorper pellentesque tellus at sagittis. Etiam rutrum finibus leo at ornare. Praesent fringilla diam at sem egestas, eu dictum urna ullamcorper. Proin ultrices massa sem, vitae convallis nisi rutrum vel. Morbi lobortis metus in arcu consequat, ac sodales mauris interdum. Duis sit amet imperdiet lorem. Aliquam libero odio, vehicula mattis lobortis eu, sagittis eu quam.

Nullam cursus eleifend eros sit amet egestas. Donec vulputate pulvinar neque in rhoncus. Donec ut nibh ac ligula tristique mollis a a quam. Integer iaculis vitae sapien vitae lacinia. Praesent orci urna, maximus non purus vitae, auctor venenatis magna. Duis ante nisi, accumsan id vulputate vitae, efficitur eget turpis. Curabitur et sem pulvinar, posuere magna in, luctus risus. Phasellus bibendum nibh eu ligula ultricies elementum. Vivamus mattis orci mauris, at mattis mauris suscipit in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel lobortis augue. Quisque eu lectus a lacus congue commodo. Maecenas non euismod libero. Proin volutpat lacus vitae venenatis aliquam. Phasellus sed ex sit amet nibh sollicitudin vulputate ut nec ipsum.
  </div>
</div>

Comments are closed.