Thu, 2003-09-18 10:05
hi
this thing is a nightmare
i am sure this kind of problem has been reported in the past, but I am unable to find any reports, and I'm getting really confused now...
1. have a look here, using moz/netscape.
2. scroll down to the bottom of the page and observe the strange goings-on with the floated boxes and their containing DIV (i've added a span#pageclear { clear: both; } after all the floats)
3. hit "reload" and watch as the page re-assembles itself into its intended shape.
does anyone have any idea how to get the "second" version of the page to come up "first"????
i might end up cheating and making those boxes out of tables anyway because it's hard to get them all the same height...
thanks
danny
Thu, 2003-09-18 11:07
#1
arrrrggghh floats and containers
Hi dannypoo,
I have rearranged some of your code as shown below.
div.category {
border: 1px solid #333399;
background-color: White;
padding: 5px;
margin: 2px;
width: 212px;
float: left;
}
div.category .catname {
font-size: larger;
}
.pageclear {
clear: both;
}
div.category a img {
float: right;
margin-top: 2px;
margin-left: 2px;
}
<div class="category">
<a href="category.php?id=2"><img src="images/categories/2.jpg" alt="Antioxidants" /></a>
<a class="catname" href="category.php?id=2">Antioxidants</a>
<p class="catprods"><a href="product.php?id=8">Vita "C" Chewable 120mg</a></p>
<div class="pageclear"></div>
</div>-
Removed most of the spans as they contained other inline elements that could fill the same roll.
Changed your clearing span to a div as divs display block by default so you don't need to use a span then display it as block.
Added a clearing div after each before the end of each category so the image wont extend out of the category floats.
Mon, 2003-09-22 10:55
#2
arrrrggghh floats and containers
Thanks a lot...
I changed the code in the way you suggested, and everything works perfectly
cheers...