[RESOLVED] Float Drop problem.
I am updating a website and found some problems with the existing html when viewing with IE8 or FF3.5 - IE7 and FF1.5 display as intended.
I need some suggestions on how to fix the following problem or maybe use a different technigue altogether. Thanks.
Basically, the page is a two column layout.
The right column has Top and Bottom divs.
The Top Div also requires two columns. The current html uses floated divs to display the info in the Top Div. A typical empty Div is used to "clear" the floats but this causes the Bottom Div to drop below the Left Div, instead of displaying directly below the Top div.
The following demonstrates the problem. The actual site is avantiplanning.ca
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body
{
background-color: gray;
margin:0;padding:0;
}
a
{
color: #c0c0c0;
font-size: 0.9em;
}
a:hover
{
color: white;
}
.menu
{
display: block;
text-decoration: none;
color: #005f8e;
font-family: Arial, 'Arial Black' , 'Arial Narrow';
font-weight: bold;
font-size: 0.8em;
font-style: italic;
}
.pgContainer
{
min-width:800px;
max-width:1024px;
margin: 0 auto;
}
.content
{
background-color: #f0f8ff;
overflow:auto;
}
.contentL
{
width: 150px;
color: #005f8e;
float: left;
padding-top: 15px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
font-family: 'Times New Roman' , Arial;
font-size: .9em;
border:thin solid red;
}
.contentR
{
margin-left:165px;
padding-left:15px;
padding-right:15px;
color: white;
padding-top: 15px;
padding-bottom: 5px;
background-color: #005f8e;
}
.pnlGroups{ border:thin solid yellow;}
.pnlGroup
{
width: 278px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 25px;
padding-right: 15px;
border:thin solid cyan;
float:left;
}
.pnlGroup p{margin:0;}
.pnlGroup a
{
text-decoration: none;
padding-left:.5em;
padding-bottom: 1em;
}
.floatL
{
float: left;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div id="pgContainer" class="pgContainer">
<div id="pnlBody" class="content">
<div id="pnlBodyLeft" class="contentL">
<a id="hyphomeleft" class="menu" href="default.aspx">Home</a>
<a id="hypChamberLeft" class="menu" href="chamber.aspx">Chamber of Commerce</a>
<a id="hypGroupLeft" class="menu" href="group.aspx">Group Insurance</a>
<a id="hypEmployeeBenefitsLeft" class="menu" href="employee.aspx">Investments</a>
<a id="hypLifeLeft" class="menu" href="life.aspx">Living Benefits</a>
<a id="hyptestleft" class="menu" href="testmonials.aspx">Testimonials</a>
<hr />
<p>For all of your questions, contact our Customer Service Department by email or </p>
<p>Call 999.555.5555</p>
<p>Fax 999.555.5555</p>
<p>222 - 22222<br /> Dewdney Trunk Rd., Maple Ridge, BC <br />HOH OHO</p>
<p>The "pnlMain" div drops below this div.</p>
</div>
<div id="pnlBodyContent" class="contentR" >
<div id="pnlGroups" class="pnlGroups" >
<div id="grpChamber" class="pnlGroup">
<a id="hypChamber" title="Click here for more information" href="chamber.aspx">Chamber of Commerce</a>
<p id="lblChamber">Guaranteed participation, coverage and rates. Packages are suited for companies of all sizes.</p>
</div>
<div id="grpGroup" class="pnlGroup">
<a id="hypGroup" title="Click here for more information" href="group.aspx">Group Insurance</a>
<p id="lblGroup">Offering employee incentives and benefits with an individually designed group insurance plan.</p>
</div>
<div id="grpEmployeeBenefits" class="pnlGroup">
<a id="hypEmployeeBenefits" title="Click here for more information" href="employee.aspx">Investments</a>
<p id="lblHealth">Our role is to find you the best possible solutions for your individual needs and dreams.</p>
</div>
<div id="grpLife" class="pnlGroup">
<a id="hypLife" title="Click here for more information" href="life.aspx">Living Benefits</a>
<p id="lblLife">Invest in the lives of yourself and your family. It is a small investment that can make a big difference.</p>
</div>
<div class="clear"></div>
</div>
<div id="pnlMain" >
<hr />
<span id="lblWelcome">More Information goes here<br /><br /><br /><br /><br />Testing </span>
<hr />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
