I have a problem with a page. Its using CSS floats. Everything looks fine in IE8 and 6, and Firefox, Chrome etc but in IE7, the bottom 3 boxes “float” above some of the main content box. I cant for the life of me figure out how to stop this. Ive tried a few things such as adding clear:both; below the main content div, and also different overflow: commands to see if that works but its no good.
The link is http://www.clickaccident.co.uk/accidentsv2/about.html
The html is:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Click Accidents</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
<body>
<!-- Wrapper Start -->
<div id="pagewrapper">
<!-- Header Start -->
<div id="header">
<div class="header_r">Call to speak to one of our advisors now: 0800 <br />
<br />
Text Click to 83336 for a call back.
<br />
<span></span> </div>
<div class="logo"><img src="images/logo.png" width="209" height="70" alt="Click Accidents Logo" /></div>
</div>
<!-- Header End -->
<div class="clear" />
</div>
<!-- Navigation Start -->
<div id="menu">
<ul class="navigation">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="#">Whats it Worth?</a></li>
<li><a href="#">10 Easy Steps</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<div id="top-title">
<h3>Specialist Accident Compensation Solicitors.</h3>
</div>
</div>
<!-- Navigation End -->
<div class="clear"></div>
<div class="homebox2">
<div class="homebox-left4">
<h1><span> About Us</span></h1>
<p>Click accidents is the specialist online accident and injury claim service brought to you by Barnetts Solicitors.</p>
<p>With over 20 years specialist accident and compensation experience, Barnetts is a firm you can trust.</p>
<p>Barnetts Solicitors was established in 1980, and has grown to be one of the top accident compensation firms in the UK, prividing professional specialist accident claim and legal services to clients throughout the UK and abroad </p>
<p>Unlike online "claims management companies", we are solicitors regulated by the Solicitors Regulation Authority (Registration Number 67445) and have no "middle men" or high pressure sales people. We pride ourselves on a reliable, friendly and professional service.</p>
</div>
<div class="homebox-right">
<div class="quoteboxtop" style="height: 8px"></div>
<div id="traffic"><a href="road-traffic.html">Road Traffic Accidents</a></div>
<div id="slipstrips"><a href="slips-trips.html">Slips, Trips & Falls</a></div>
<div id="work"><a href="work-related.html">Work Related Illness & Injuries</a></div>
<div id="medical"><a href="medical-dental.html">Medical/Dental Mistakes</a></div>
<div id="accidentsabroad"><a href="accidents-abroad.html">Accidents Abroad</a></div>
<div id="faultyequipment"><a href="defective-product.html">Faulty Equipment</a></div>
<div id="solsmistakes"><a href="solicitor-mistakes.html">Other Solicitors Mistakes</a></div>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div style="clear:both;"></div>
<!-- Content Start -->
<div id="content">
<div class="onlinequote" style="height: 144px"><br />
<br />
<div class="boxtext2">
<strong>Compensation</strong><br />
<a href="whats-it-worth.html">What are my Injuries worth?</a></div>
</div>
<div class="testimonials" style="height: 133px">
<div class="boxtext3">
<h2><br />
<br />
</h2></div>
<div style="text-align:center; color:#fff">
<strong>Mr A Ahmed</strong>
Click Accidents Injury people were so professional. The service was efficient and very friendly.
</div>
</div>
<div class="phoneadvisor" style="height: 144px"><br />
<br />
<div class="boxtext"><strong>0800 066 5021</strong>
<br />
Contact us for a free no obligation discussion.<br />
</div>
</div>
<div class="liveadvisor" style="height: 144px"><br />
<br />
<div class="boxtext"><strong>Live Support</strong><br />
Speak to someone online now.
<br />
</div>
</div>
<div class="clear"></div>
<div class="bottombar" style="height: 153px"></div>
</div>
<!-- Right Content End -->
<div class="clear"></div>
<!-- Content End -->
<div class="clear"></div>
<!-- Bottom Bar Content Start -->
<!-- Footer Start -->
<div id="footerbg">
<div id="footer">
<ul class="navigation c5">
<li><a href="index.html">Home</a></li>
<li><a href="#">Whats it Worth?</a></li>
<li><a href="#">10 Easy Steps</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<br />
<br />
<div id="copyrights" class="leftalign">
ClickAccidents.co.uk is a trading name of Barnetts Solicitors (vat no. 325 0540 94)
<br/>
Regulated by the Solicitors Regulation Authority (SRA Number 67445).
<br/>
© Barnetts Solicitors 2009 | All rights reserved
</div>
</div>
<!-- Footer End -->
</div>
<!-- Wrapper End -->
</body>
</html>
Any help is appreciated 🙂
Why don’t you try not to set the width of #menu css as the width can be determined by the size of inner content.
(or)
do one thing first float #top-title on left then float .navigation to right. let me know if it solves your problem