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

Question

hey for some reason the divs on my page are still stacking on top of each other despite having a float left parameter. im embedding a zazzle page store and the divs usually float left but once they're embedded in my page they stack vertically. i'm guessing something in my page is overruling the float left parameter but i have no idea what. here i've pasted the code below but it might be easier to just check out the 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 and Clover Merchandise</title>
<meta name="description" content="Get fficial Cherries and Clover T-Shirts, Hats, and 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 by Zazzle. For 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 by date created"><strong>date created</strong></a> | <a href="?st=1&amp;gridPage=1_1&amp;gridSort=1_popularity" title="Sort results by 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 and 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 and Clover T-Shirt" style="width: 216px;">That Movie Cherries and 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 and 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 and Clover T-Shirt" style="width: 216px;">That Movie Cherries and 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 and 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 and Clover T-Shirt" style="width: 216px;">That Movie Cherries and 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 and 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 and Clover T-Shirt" style="width: 216px;">That Movie Cherries and 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 and 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 and Clover Tie" style="width: 216px;">Cherries and Clover Tie</a>
                        <div class="productDescription" title="Cherries and 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 and Clover Tie

&quot;What happens when best friends become lovers?&quot;" class="productDescription">Cherries and 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 and 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 by 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>. All rights reserved. <a href="/about" style="text-decoration:none; color:#ffffff;"> |&nbsp; About |&nbsp; </a> <a href="/contact" style="text-decoration:none; color:#ffffff;">Contact</a></span>
</center>
</div>

</div>

</body></html>

painotpi · Accepted Answer · 2013-05-06T06:41:59.400

2

You'd need to add the following css,

.gridCell{
  float: left;
}

.count{
  float: left;
}

Well, I just added float: left on .gridCell and it's working fine

edited May 06 '13 at 06:41

answered May 06 '13 at 06:24

painotpi

6,894
1
37
70

those solutions don't seem to be working... unless i'm doing them wrong.. but the style page already has float:left on the .gridCell class and float:right on the .count class. even when i change the count class's float to left it still doesn't work. furthermore if i change the float property in the Inspect Element tab of my browser it still doesn't appear to solve the problem – modest_max May 06 '13 at 06:37
you're right actually it does work! i must've been doing it in the wrong place. i'm using this zazzle thing so i have difficulty keeping track of where the css is coming from. but i just added the rule to the header and now it seems to work. thanks a lot man! :D – modest_max May 06 '13 at 06:58

score 1 · Answer 2 · answered May 06 '13 at 06:25

1

if you add a

float: left;

to the gridCell class than it will be good ;)

answered May 06 '13 at 06:25

hgwd92

69
3
11

those solutions don't seem to be working... unless i'm doing them wrong.. but the style page already has float:left on the .gridCell class and float:right on the .count class. even when i change the count class's float to left it still doesn't work. furthermore if i change the float property in the Inspect Element tab of my browser it still doesn't appear to solve the problem – modest_max May 06 '13 at 06:33
In your example you don't have any css for the gridCell class only inline css. It is better to don't use inline css but if you want to you can just add float:left; in the inline css like this: `
` don't forget to change it for all the elements thats why it is easier to use no inline css
– hgwd92 May 06 '13 at 06:39

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

2 Answers2