|
-
Nov 30th, 2009, 12:08 PM
#1
 [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>
-
Nov 30th, 2009, 12:17 PM
#2
Re: Float Drop problem.
Could you post a screenshot of what you mean? It all looks proper to me.
It actually looks better in Firefox 3.5 and IE8 than it does in Firefox 2 or IE7.
The div with the yellow border messes up in the latter. -- *edit* seems only in IE. In Fx it all looks fine.
-
Nov 30th, 2009, 01:00 PM
#3
Re: Float Drop problem.
The FF35 image (bottom image) has a large gap between the Top and Bottom divs in the right column. FF15 is the display I want.
Using IE is the same type of problem. IE7 displays like FF1.5, IE8 displays like FF3.5.
If I add more information to the Left side div, the Bottom div in the Right column will drop even further.
-
Nov 30th, 2009, 01:25 PM
#4
Re: Float Drop problem.
Add this...
Code:
.pnlGroups{ border:thin solid yellow;overflow:auto;}
...and get rid of your class="clear" div. Methodology is explained here.
-
Nov 30th, 2009, 02:14 PM
#5
Re: Float Drop problem.
Thanks. That seems to have solved the problem.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote