2 replies [Last post]
dannypoo
Offline
newbie
london
Last seen: 16 years 5 weeks ago
london
Joined: 2003-08-20
Posts: 4
Points: 0

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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 &quot;C&quot; 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.
Hope that helps

[/]
dannypoo
Offline
newbie
london
Last seen: 16 years 5 weeks ago
london
Joined: 2003-08-20
Posts: 4
Points: 0

arrrrggghh floats and containers

Thanks a lot...

I changed the code in the way you suggested, and everything works perfectly

cheers...