I have a div box with a border with the height set to "auto." Inside the div is some text along with another smaller div box with an image inside.
The outer box's height isn't increasing to fit around the height of the div inside. Also, IE is doing something very weird by adding some space before the quote mark. Firefox isn't doing that...
I've attached a screenshot of the issue. Here's my code:
HTML:
Code:
<div id="Case_Study_Container">
<div id="Case_Study_Quote">
<div id="client_name">
<img src="images/cs_photo_grupo.jpg" width="88" height="118" border="0" alt="Photo" class="photo" />
<strong>Mr. Michel Montant</strong>
- Vice President of Operations for Grupo Posadas
</div>
"Prometeo is at the core of our strategy to create a competitive advantage through service. This advantage will help us create loyal customers that will give us their business for the long term. Prometeo has helped us attain the consistency that is so difficult to achieve in a chain of our size."</div>
</div>
CSS:
Code:
#Case_Study_Container {
color: #000;
margin: 10px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid #333;
width: auto;
}
#Case_Study_Quote {
margin: 0px 0px 0px 0px;
padding: 0px;
background-color: #FFF;
height: auto;
}
#client_name {
width: 200px;
height: 120px;
margin: 0px 0px 5px 10px;
padding: 5px 5px 5px 5px;
float:right;
background: #FDF8E3;
border:#000000 solid 1px;
}
#client_name p {
margin:0;
}
img.photo {
float: left;
margin: 0px 10px 2.5px 0px;
padding: 0px;
border:none;
}
Bookmarks