css - Why are my left floated divs still stacking on top of each other? -


hey reason divs on page still stacking on top of each other despite having float left parameter. im embedding zazzle page store , divs float left once they're embedded in page stack vertically. i'm guessing in page overruling float left parameter have no idea what. here i've pasted code below might easier check out page: http://pilotpigproductions.com/cherries_and_clover/merchandise/

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>cherries , clover merchandise</title> <meta name="description" content="get fficial cherries , clover t-shirts, hats, , more!">   <meta property="og:image" content="http://www.pilotpigproductions.com/pictures/cherries%20and%20clover%20poster.jpg">   <style type="text/css"> a:link {     text-decoration: none;     color: #0066cc; } a:visited {     text-decoration: none;     color: #0066cc; } a:hover {     text-decoration: underline;     color: #0066cc; } a:active {     text-decoration: none;     color: #0066cc; } body {     font-size: 12pt;     font-family: helvetica, "arial sans-serif"; } #apdivback {     width:960px;     height:1100px;     top:7px;     margin:0 auto;     position:relative;     z-index:1;     background-color:#eeeeee; } #apdivheader{     position:absolute;     left:7px;     top:7px;     width:946px;     height:56px;     background-image: url(/pictures/header.jpg); } #apdivslogan{     position:absolute;     left:400px;     top:15px;     width:200px;     height:30px; } #apdivfooter{     position:absolute;     left:7px;     bottom:7px;     width:932px;     padding:7px;     height:13px;     font-family: arial, helvetica, sans-serif;     background-image: url(/pictures/header.jpg); } #apdivcontent {     position:absolute;     left:7px;     top:70px;     z-index:1;     width: 910px;     height: 954px;     background-image: url(/pictures/background_collage_dark.jpg);     padding:18px; } #apdiv1 {     position: absolute;     top: 28px;     left:50px;     width: 820px;     height:860px;     z-index:1;     overflow:auto;     padding:16px;     border-radius:10px; }  </style>  <!--google analytics--> <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script src="scripts/swfobject_modified.js" type="text/javascript"></script> <script type="text/javascript">    var _gaq = _gaq || [];   _gaq.push(['_setaccount', 'ua-29886090-1']);   _gaq.push(['_trackpageview']);    (function() {     var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true;     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';     var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s);   })();  </script>  </head>   <body style="background-image: url(/pictures/bg_texture.jpg);">  <div id="apdivback">   <div id="apdivheader">  <a href="/index.php" onmouseover="rollover.src=&quot;/pictures/banner logo rollover.png&quot; " onmouseout="rollover.src=&quot;/pictures/banner logo.png&quot; "><img src="/pictures/banner logo.png" border="0" name="rollover"></a>  <div id="apdivslogan"> <a href="/about" onmouseover="rollover2.src=&quot;/pictures/slogan rollover.png&quot; " onmouseout="rollover2.src=&quot;/pictures/slogan.png&quot; "><img src="/pictures/slogan.png" border="0" name="rollover2"></a> </div>  </div>    <div id="apdivcontent">  <div id="apdiv1" style="background-color:#f6f6f6">     <!-- powered zazzle. more information, please visit http://www.zazzle.com  // --> <div class="allgrids clearfix">     <div class="centergrids" style="width:820px"> <div class="clearme"></div><div class="count" style="width:820px"><span class="sortlinks">sort by: <a href="?gridpage=1_1&amp;gridsort=1_date" class="selectedsort" title="sort results date created"><strong>date created</strong></a> | <a href="?st=1&amp;gridpage=1_1&amp;gridsort=1_popularity" title="sort results popularity">popularity</a></span>&nbsp;&nbsp;&nbsp;&nbsp;<span>showing  1 - 5 of 5 products.</span>&nbsp;&nbsp;</div><div class="clearme short"></div>               <div class="gridcell" style="width: 216px;margin:0 9px 9px 0;">                     <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235016439554561349?rf=238951950416954647&amp;zbar=1" class="realviewlink" style="height: 214px;"><img src="http://rlv.zcache.com/that_movie_cherries_and_clover_t_shirt-rc0a7b2d7fee14e01804a865ae66581bf_804gs_210.jpg?bg=0xffffff" class="realviewimage" alt="that movie cherries , clover t-shirt" title="" style="border:2px solid #ffffff;"></a>                     <div class="gridcellinfo">                         <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235016439554561349?rf=238951950416954647&amp;zbar=1" class="producttitle" title="that movie cherries , clover t-shirt" style="width: 216px;">that movie cherries , clover t-shirt</a>                         <div class="productdescription" title="basic t-shirt template"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235016439554561349?rf=238951950416954647&amp;zbar=1" title="basic t-shirt template" class="productdescription">basic t-shirt template         </a></div>                                                 <div class="productprice"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235016439554561349?rf=238951950416954647&amp;zbar=1" title="basic t-shirt template" class="productprice">$20.10</a></div>                     </div>                 </div>              <div class="gridcell" style="width: 216px;margin:0 9px 9px 0;">                     <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235334955958403049?rf=238951950416954647&amp;zbar=1" class="realviewlink" style="height: 214px;"><img src="http://rlv.zcache.com/that_movie_cherries_and_clover_t_shirt-r00265dfcdba34cd99493cccb31c6fb95_va6lr_210.jpg?bg=0xffffff" class="realviewimage" alt="that movie cherries , clover t-shirt" title="" style="border:2px solid #ffffff;"></a>                     <div class="gridcellinfo">                         <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235334955958403049?rf=238951950416954647&amp;zbar=1" class="producttitle" title="that movie cherries , clover t-shirt" style="width: 216px;">that movie cherries , clover t-shirt</a>                         <div class="productdescription" title="basic dark t-shirt template"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235334955958403049?rf=238951950416954647&amp;zbar=1" title="basic dark t-shirt template" class="productdescription">basic dark t-shirt template        </a></div>                                               <div class="productprice"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235334955958403049?rf=238951950416954647&amp;zbar=1" title="basic dark t-shirt template" class="productprice">$25.35</a></div>                     </div>                 </div>              <div class="gridcell" style="width: 216px;margin:0 9px 9px 0;">                     <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235028941325035800?rf=238951950416954647&amp;zbar=1" class="realviewlink" style="height: 214px;"><img src="http://rlv.zcache.com/that_movie_cherries_and_clover_t_shirt-r70e461a2a12641c5917c74b7c1966409_8nhmi_210.jpg?bg=0xffffff" class="realviewimage" alt="that movie cherries , clover t-shirt" title="" style="border:2px solid #ffffff;"></a>                     <div class="gridcellinfo">                         <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235028941325035800?rf=238951950416954647&amp;zbar=1" class="producttitle" title="that movie cherries , clover t-shirt" style="width: 216px;">that movie cherries , clover t-shirt</a>                         <div class="productdescription" title="vertical t-shirt template"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235028941325035800?rf=238951950416954647&amp;zbar=1" title="vertical t-shirt template" class="productdescription">vertical t-shirt template         </a></div>                                                <div class="productprice"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235028941325035800?rf=238951950416954647&amp;zbar=1" title="vertical t-shirt template" class="productprice">$21.15</a></div>                     </div>                 </div>              <div class="gridcell" style="width: 216px;margin:0 9px 9px 0;">                     <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235130804805570237?rf=238951950416954647&amp;zbar=1" class="realviewlink" style="height: 214px;"><img src="http://rlv.zcache.com/that_movie_cherries_and_clover_t_shirt-rcfa1877a3bc9494bbe6c502f77f357b7_8naxt_210.jpg?bg=0xffffff" class="realviewimage" alt="that movie cherries , clover t-shirt" title="" style="border:2px solid #ffffff;"></a>                     <div class="gridcellinfo">                         <a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235130804805570237?rf=238951950416954647&amp;zbar=1" class="producttitle" title="that movie cherries , clover t-shirt" style="width: 216px;">that movie cherries , clover t-shirt</a>                         <div class="productdescription" title="ladies basic t-shirt template"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235130804805570237?rf=238951950416954647&amp;zbar=1" title="ladies basic t-shirt template" class="productdescription">ladies basic t-shirt template        </a></div>                                                 <div class="productprice"><a href="http://www.zazzle.com/that_movie_cherries_and_clover_t_shirt-235130804805570237?rf=238951950416954647&amp;zbar=1" title="ladies basic t-shirt template" class="productprice">$30.65</a></div>                     </div>                 </div>              <div class="gridcell" style="width: 216px;margin:0 9px 9px 0;">                     <a href="http://www.zazzle.com/cherries_and_clover_tie-151446319789811743?rf=238951950416954647&amp;zbar=1" class="realviewlink" style="height: 214px;"><img src="http://rlv.zcache.com/cherries_and_clover_tie-r1e4d42d2495d4c9999db8d1de4fd0c9e_v9whb_8byvr_210.jpg?bg=0xffffff" class="realviewimage" alt="cherries , clover tie" title="" style="border:2px solid #ffffff;"></a>                     <div class="gridcellinfo">                         <a href="http://www.zazzle.com/cherries_and_clover_tie-151446319789811743?rf=238951950416954647&amp;zbar=1" class="producttitle" title="cherries , clover tie" style="width: 216px;">cherries , clover tie</a>                         <div class="productdescription" title="cherries , clover tie  &quot;what happens when best friends become lovers?&quot;"><a href="http://www.zazzle.com/cherries_and_clover_tie-151446319789811743?rf=238951950416954647&amp;zbar=1" title="cherries , clover tie  &quot;what happens when best friends become lovers?&quot;" class="productdescription">cherries , clover tie "what happens when best friends become lovers?" ...</a></div>                                               <div class="productprice"><a href="http://www.zazzle.com/cherries_and_clover_tie-151446319789811743?rf=238951950416954647&amp;zbar=1" title="cherries , clover tie  &quot;what happens when best friends become lovers?&quot;" class="productprice">$31.75</a></div>                     </div>                 </div><div class="clearme"></div><br><div class="count" style="width:820px">  <span class="sortlinks">sort by: <a href="?gridpage=1_1&amp;gridsort=1_date" class="selectedsort"><strong>date created</strong></a> | <a href="?st=1&amp;gridpage=1_1&amp;gridsort=1_popularity">popularity</a></span>&nbsp;&nbsp;&nbsp;&nbsp;<span>showing 1 - 5 of 5 products.</span>&nbsp;&nbsp;<div class="pbimg"><a href="http://www.zazzle.com?rf=238951950416954647"><img src="http://www.zazzle.com/assets/graphics/logos/poweredbyzazzle_v2.png" alt="powered zazzle"></a></div></div><div class="clearme"></div><br>      </div> </div>  <script type="text/javascript">//<![cdata[ // google analytics tracking var useanalytics = false; if ( useanalytics ) {     var gajshost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");     document.write(unescape("%3cscript src='" + gajshost + "google-analytics.com/ga.js' type='text/javascript'%3e%3c/script%3e")); } //]]></script> <script type="text/javascript">//<![cdata[ // google analytics page tracking var useanalytics = false; if ( useanalytics ) {     var pagetracker = _gat._gettracker("yourownanalyticscodenumberhere");     pagetracker._setdomainname("none");     pagetracker._setallowlinker(true);     pagetracker._trackpageview(); } //]]></script>    </div> </div>  <div id="apdivfooter"> <center> <span style="color:#ffffff; font-size:10pt;">© 2008 <a href="/about" style="text-decoration:none; color:#ffffff;">pilot pig productions</a>. rights reserved. <a href="/about" style="text-decoration:none; color:#ffffff;"> |&nbsp; |&nbsp; </a> <a href="/contact" style="text-decoration:none; color:#ffffff;">contact</a></span> </center> </div>  </div>  </body></html> 

you'd need add following css,

.gridcell{   float: left; }  .count{   float: left; } 

well, added float: left on .gridcell , it's working fine


Comments