As you can see, when the div expands I have no option to scroll down and I'm wondering how I would go about fixing this. Here is my css
<style>
#cust_info {
width: 300px;
min-height:350px;
margin: 0 auto;
padding: 1em;
background-color: #fff;
border-radius: 25px;
border: 2px solid #66CCFF;
padding: 20px;
position: fixed;
top: 100px;
left: 40px;
font-family: arial;
}
.more {
display: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
</style>
I gave the div a min height so it would expand without text leaving the area, but when the div expands past the screen I lose most of the div.
Please remove
position:fixed
from#cust_info id
.Removing that will automatically give a scroll in your page.
For keeping it left align, just give
float:left
to#cust_info
.