Menu
Hello guys,
I was wondering if anyone has a solution to this…
Basically I have 3 divs using floats the position with a holding div. The holding div has a min-height set, but when I over type in the middle one of the three divs the text appears to be on the outside of the holding div in firefox. Works ok in IE. I know FF doesn’t support min-height, but was wondering if someone has a fix of some sort?
Below is my .htm page.
Thanks
[SIZE=”1″][COLOR=”Red”]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
#product-holder-sim{
margin:auto;
width:500px;
border:#666666 solid 1px;
min-height: 200px;
}
.product-image{
float:left;
border:1px solid #000066;
padding: 5px;
width:80px;
}
.product-desc{
padding: 5px;
width:290px;
float:left;
border:1px solid #FF0000;
}
.product-btn{
width:100px;
padding-top: 30px;
float: right;
border:1px solid #000066;
}
–>
</style>
</head>
<body>
<div id=”product-holder-sim”>
<div class=”product-image”>1</div>
<div class=”product-desc”>
<h4><a href=”#”>2</a></h4>
<p>Info goes in here, but in firefox the outer div doesn’t adjust the height causing the text to jump out of the div</p>
<p>gvesdg</p>
<p>edgbe</p>
<p>gbe</p>
<p>bd</p>
<p> </p>
</div>
<div class=”product-btn”>
<div class=”arrow”>
<div class=”arrow-holder”>3</div>
<div class=”arrow-text”><a href=”#” class=”dark-blue”>more details</a></div>
</div>
</div>
</div>
</body>
</html>[/COLOR][/SIZE]