Please help. CSS float problem.

It looks like a tag is inhereting the float behaviour when it shouldn't

[SteveMellor]

Hi there,

I have a site that I am working on at the moment. One of the pages is for links.

The problem comes on the Links page under Links>Useful Contacts. What I have here is a div with two other divs inside that are floating left and positioned absolutely. If you have a look in it on IE 7 it looks correct.

In Firefox, the images that appear at the bottom of the page (and are meant to look the same as on the homepage) appear bunched up (and in Safari as well). It's only on this line that it happens and it looks almost like the div tag with the picture in (that is sat below the content) has inherited some of the attributes of the earlier div.

My first thought was that there was a missing closing </div> element somewhere but I can't seam to find one and, indeed, the page validates for both CSS and HTML.

I'm stumped on this one. This is the first time that IE has rendered the page as I would have expected it to work and Firefox hasn't. Any help would be more than welcome.

I look forward to all your replies as I'm sure that the issue can be resolved. To be honest, it's probably something simple that I've overlooked.

The HTML is as follows.

<div class="content">
  <span class="heading">Useful Contacts<br/>Superintendent Registrar</span>
<p>Choose a catagory from the left to see the links.</p>
<div class="linkSubnav">
  <a href="links.php?p=3&amp;i=3" class="linkSubnav">Superintendent Registrar</a><br />
  <a href="links.php?p=3&amp;i=6" class="linkSubnav">Florists</a><br />
  <a href="links.php?p=3&amp;i=4" class="linkSubnav">Caterers</a><br />
  <a href="links.php?p=3&amp;i=5" class="linkSubnav">Photographers</a><br />
  <a href="links.php?p=3&amp;i=9" class="linkSubnav">Wedding Cakes</a><br />
  <a href="links.php?p=3&amp;i=10" class="linkSubnav">Decorations and Ideas</a><br />
  <a href="links.php?p=3&amp;i=11" class="linkSubnav">Wedding Stationery</a><br />
  <a href="links.php?p=3&amp;i=12" class="linkSubnav">Chair Covers</a><br />
  <a href="links.php?p=3&amp;i=13" class="linkSubnav">What to Wear</a><br />
  <a href="links.php?p=3&amp;i=14" class="linkSubnav">Videographers</a><br />
  <a href="links.php?p=3&amp;i=15" class="linkSubnav">Ice Cream and Chocolate</a><br />
  <a href="links.php?p=3&amp;i=16" class="linkSubnav">Toastmasters</a><br />
  <a href="links.php?p=3&amp;i=17" class="linkSubnav">Arriving in style</a><br />
  <a href="links.php?p=3&amp;i=18" class="linkSubnav">Marquee Hire</a><br />
  <a href="links.php?p=3&amp;i=19" class="linkSubnav">Music</a><br />
  <a href="links.php?p=3&amp;i=20" class="linkSubnav">DJs</a><br />
  <a href="links.php?p=3&amp;i=21" class="linkSubnav">Live Bands</a><br />
  <a href="links.php?p=3&amp;i=22" class="linkSubnav">Wedding Websites</a><br />
  <a href="links.php?p=3&amp;i=23" class="linkSubnav">Gift Services</a><br />
</div>
<div class="linkSublink">
  <p>
   <span class="linkTitle">John Brassington</span><br />
   tel: [phone]<br /><a href="http://[e-mail]" target="_blank"
   class="linkLink">website</a>
   <br />
  </p>
</div>
</div>
<div class="bottomPics">
 <img src="images/index/1.jpg" alt="Hodsock Priory" />
 <img src="images/index/2.jpg" alt="Hodsock Priory" />
 <img src="images/index/3.jpg" alt="Hodsock Priory" />
 <img src="images/index/4.jpg" alt="Hodsock Priory" /> 
 <img src="images/index/5.jpg" alt="Hodsock Priory" />
</div>

And the CSS is:

div.linkSubnav{
 position:relative;
 width:120px;
 height:auto;
 float:left;
 font-size:11px;
 padding:8px;
 background:url(../images/bg2.png);
}
div.linkSublink{
 position:relative;
 float:left;
 top:0px;
 left:20px;
 width:auto;
}
div.content{
 position:relative;
 top:0px;
 left:212px;
 width:400px;
 min-height:350px;
 z-index:3;
}
div.bottomPics{
 position:relative;
 top:0px;
 left:58px;
 width:556px;
 z-index:5;
}

I also have the whole page wrapped in a div called container, and elements are defined in the body as well. They the following CSS

body {
 text-align: center;
 background:url(../images/bg.png);
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
}
#container {
 margin: 0 auto;
 width: 662px;
}

[SteveMellor]

Problem solved by the addition of clear:both to the BottomPics tag.