CODEWITHSUNDEEP
htmlcss
user541597
user541597

Reputation: 4345

Div height not expanding to all elements

I have a div that i use as a simple modal popup. The height of this div is set to auto, however when I view it it doesn't expand all the way down to cover all the elements inside of it. Any idea on how I can make the div height cover all the elements?

Any help would be appreciated it.

Thanks,

Here is the html

<div id="basic-modal-content">
      <h3 id="eventtitle"></h3>
      <p>Below you will find information on the clicked event including a brief description, start date, and the end date, location, and a link, if provided.</p>
      <br />
      <code><span style="color:#A17E13"><b>Description</b></span> - <span style="color:#006400" id="eventdescription"></span></code>
      <code><span style="color:#A17E13"><b>Start</b></span> - <span style="color:#006400" id="eventstart"></span></code>
      <code><span style="color:#A17E13"><b>End</b></span> - <span style="color:#006400" id="eventend"></span></code>
      <code><span style="color:#A17E13"><b>Location</b></span> - <span style="color:#006400" id="eventlocation"></span></code>
      <code><span style="color:#A17E13"><b>Link</b></span> - <span style="color:#006400" id="eventurl"></span></code>

      <input type="button" id="deletecalendarentry" style="display:none" value="DELETE" />
</div>

Here is the css

#simplemodal-container {height:auto; width:auto; color:#006400; background-image:url(../Images/back.png); border:4px solid beige;  padding:12px;}

Upvotes: 0

Views: 139

Answers (2)

Mee
Mee

Reputation: 158

Try This jsFiddle.

I have changed your CSS ID Name from #simplemodal-container To #basic-modal-content.

It is working for me, so let me know if you have any problems.

Upvotes: 2

Praveen Dabral
Praveen Dabral

Reputation: 2509

You can give some minimum height to the div as

#div{min-height:50px;}

Upvotes: 0

Related Questions