treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Floating Problem

  • Hi All, hope you can help.

    To put it as shortly as possible. I am trying to float 2 items so that they will line up eventually. Then the background-wrap is supposed to go around it.

    Now, IE shows it correctly (weirdly!) but, firefox does not. Like so........http://qkpic.com/127f4

    It shows them side-by-side but firefox wont let the background-wrap around it.

    Heres the code i'm using for it (without all the other crap)....
    .album
    {
    margin: 7px 0;
    padding: 7px;
    background-color: #fafafa;
    border: 1px #ccc solid;
    float: left;
    width: 440px;
    margin-right: 10px;
    height: 90px;
    overflow: hidden;
    margin-bottom: 7px;}


    The wrap itself is part of the wordpress main styling. The floats are also cleared just underneath the code itself.

    I'm not sure why its doing it and have tried lots of different changes. Now, im sure it'll be something simple that i'm just missing so hopefully somebody can just point it out!

    Thanks in advance.
  • Can you show us the page source? When I went to view page source for some reason I could not find it. I'm thinking it has something to do with the div order.
  • Ok, Heres the page source. I've had to put an XXXXX in places where I can't put certain names as this is a client project due to go live soon.....

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd\">

    <html xmlns=\"http://www.w3.org/1999/xhtml\" dir=\"ltr\" lang=\"en-US\">

    <!--Force IE8 Compatability START-->
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\" />
    <!--Force IE8 Compatability END-->

    <!--CUFON-->

    <head profile=\"http://gmpg.org/xfn/11\">
    <LINK REL=\"SHORTCUT ICON\" HREF=\"images/favicon.ico\">
    <title>XXXXXXXX</title>

    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />
    <meta name=\"description\" content=\"Just another WordPress weblog\" />

    <script src=\"http://XXXXXXXX/wp-content/themes/starkers/js/cofon-yui.js\" type=\"text/javascript\"></script>
    <script src=\"http://XXXXXXXX/wp-content/themes/starkers/js/rXXXXXXXX_400-rXXXXXXXX_700-rXXXXXXXX_400.font.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
    Cufon.replace('h3');
    </script>
    <!--TIME CSS SWITCHER-->

    <link rel=\"stylesheet\" type=\"text/css\" href=\"http://XXXXXXXX/wp-content/themes/starkers/style.css\" /> <!--[if IE]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"XXXXXXXX/wp-content/themes/starkers/IEStyle.css\" />
    <![endif]--><!--TIME CSS SWITCHER END-->


    <link rel=\"alternate\" type=\"application/rss+xml\" title=\"XXXXXXXX\" href=\"XXXXXXXX/feed\" />
    <link rel=\"pingback\" href=\"http://XXXXXXXX/xmlrpc.php\" />

    <link rel=\"alternate\" type=\"application/rss+xml\" title=\"XXXXXXXX\" href=\"http://XXXXXXXXfeed\" />
    <link rel=\"stylesheet\" href=\"http://XXXXXXXXXX/wp-content/plugins/wp125/wp125.css\" type=\"text/css\" media=\"screen\" />
    <link rel='stylesheet' id='NextGEN-css' href='http://XXXXXXXX/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
    <link rel='stylesheet' id='shutter-css' href='XXXXXXXXo/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.0' type='text/css' media='screen' />
    <meta name='NextGEN' content='1.2.1' />
    <script type='text/javascript'>var Kaltura_WPVersion = \"2.8\";</script><script type='text/javascript'>
    /* <![CDATA[ */
    var shutterSettings = {
    msgLoading: \"L O A D I N G\",
    msgClose: \"Click to Close\",
    imageCount: \"1\"
    };
    /* ]]> */
    </script>
    <script type='text/javascript' src='XXXXXXXX/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.0'></script>
    <script type='text/javascript' src='XXXXXXXX/wp-content/plugins/kaltura-interactive-video/js/kaltura.js?v1_15&#038;ver=2.8'></script>
    <script type='text/javascript' src='XXXXXXXX/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
    <script type='text/javascript' src=XXXXXXXX/wp-content/plugins/kaltura-interactive-video/js/swfobject.js?v1_15&#038;ver=1.5'></script>
    <link rel=\"EditURI\" type=\"application/rsd+xml\" title=\"RSD\" href=\"http://XXXXXXXX/xmlrpc.php?rsd\" />
    <link rel=\"wlwmanifest\" type=\"application/wlwmanifest+xml\" href=\"http://XXXXXXXX/wp-includes/wlwmanifest.xml\" />
    <link rel='index' title='XXXXXXXX' href='http://XXXXXXXX' />
    <meta name=\"generator\" content=\"WordPress 2.8\" />
    <script type=\"text/javascript\" language=\"javascript\">
    var img = 'http://XXXXXXXX/wp-content/Cimy_Header_Images';

    var swap_type = 'i';
    var swap_rate = 1;
    var all_images = Array('Football.com Banner.JPG', 'Strand header banner 5 25x0 8cm.jpg');
    var tot_images = 2;

    function cimy_change_image()
    {
    var d = new Date();
    var span_id = document.getElementById('cimy_span_id');

    var tot_time;

    if (swap_type == \"s\")
    tot_time = d.getSeconds();
    else if (swap_type == \"i\")
    tot_time = d.getMinutes();
    else if (swap_type == \"G\")
    tot_time = d.getHours();
    else if (swap_type == \"d\")
    tot_time = d.getDay();
    else if (swap_type == \"W\")
    tot_time = d.getMonth();
    else
    tot_time = d.getYear();

    var new_img = parseInt(tot_time / swap_rate) % tot_images;
    span_id.innerHTML = '<img src=\"'+img+'/'+all_images[new_img]+'\" />';

    t = setTimeout(\"cimy_change_image()\", 1000);
    }
    </script>

    <style type=\"text/css\">
    #cimy_img_id {
    background: url('http://XXXXXXXX/wp-content/Cimy_Header_Images/Football.com Banner.JPG') no-repeat;
    background-position: top left;
    }
    </style><link rel=\"stylesheet\" href=\"http://www.XXXXXXXX/wp-content/themes/starkers/dd-multi-col-cats.css\" type=\"text/css\" media=\"screen\" /><link rel=\"stylesheet\" href=\"XXXXXXXX/wp-content/plugins/kaltura-interactive-video/css/kaltura.css?v1.15\" type=\"text/css\" /><!-- begin nextgen-smooth scripts -->
    <script type=\"text/javascript\" src=\"XXXXXXXX/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/scripts/mootools.v1.11.js\"></script>
    <script type=\"text/javascript\" src=\"XXXXXXXX/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/scripts/jd.gallery.js\"></script>
    <script type=\"text/javascript\" src=\"http://XXXXXXXX/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/scripts/jd.gallery.transitions.js\"></script>
    <link type=\"text/css\" href=\"XXXXXXXX/wp-content/plugins/nextgen-smooth-gallery/SmoothGallery/css/jd.gallery.css\" rel=\"stylesheet\" media=\"screen\" />
    <!-- end nextgen-smooth scripts -->
    <link rel=\"stylesheet\" href=\"XXXXXXXX/wp-content/plugins/wp-photo-album/theme/wppa_style.css\" type=\"text/css\" media=\"screen\" />
    <link id='MediaRSS' rel='alternate' type='application/rss+xml' title='NextGEN Gallery RSS Feed' href='http://XXXXXXXX/wp-content/plugins/nextgen-gallery/xml/media-rss.php' />

    <!-- NextGeEN Gallery CoolIris/PicLens support -->
    <script type=\"text/javascript\" src=\"http://lite.piclens.com/current/piclens_optimized.js\"></script>
    <!-- /NextGEN Gallery CoolIris/PicLens support --><link rel=\"stylesheet\" href=\"http://XXXXXXXXwp-content/plugins/wp125/wp125.css\" type=\"text/css\" media=\"screen\" />

    <!--POP UP WINDOW SCRIPT-->

    <SCRIPT TYPE=\"text/javascript\">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
    href=mylink;
    else
    href=mylink.href;
    window.open(href, windowname, 'width=318,height=185,,scrollbars=no');
    return false;
    }
    //-->
    </SCRIPT>



    </head>

    <body>
    <div id=\"page-wrap\">


    <div id=\"masthead\">
    <!--Main Logo-->
    <div id=\"logo\">
    <img src=\"images/logo.png\">
    </div>


    <!--Large Upper Banner-->
    <div id=\"banner\">
    <!--ROTATING BANNER-->
    <span id=\"cimy_span_id\"><img id=\"cimy_img_id\" src=\"\" height=\"150\" /></span>
    <script type=\"text/javascript\" language=\"javascript\">cimy_change_image();</script>
    </div>


    </div>


    <div id=\"upper-nav-bar\">

    <div id=\"hp_webplayerlink\">
    <A HREF=\"player/player.php\" onClick=\"return popup(this, 'notes')\"><img src=\"images/upperbar_listenlive.png\"></A><A HREF=\"XXXXXXXX/RR-tv\"><img src=\"images/upperbar_rivertv.png\"></A>
    </div>

    <div id=\"nowplaying\">
    <p id=\"nowplaying\">Now Playing....</p>
    </div>

    <div id=\"nav-social\">

    <p id=\"nowplaying\">

    <script>

    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym=\"\"+daym
    var dayarray=new Array(\"Sunday\",\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\")
    var montharray=new Array(\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\")
    document.write(\"\"+dayarray[day]+\", \"+daym+\" \"+montharray[month]+\" \"+year+\"</b></font></small>\")

    </script>

    <div id=\"icons\">
    <a href=\"http://twitter.com/XXXXXXXX\"><img src=\"images/ic_twit.png\" class=\"icons\"></a>
    <a href=\"http://www.facebook.com/XXXXXXXX\"><img src=\"images/ic_fbook.png\" class=\"icons\"></a>
    <a href=\"http://www.myspace.com/XXXXXXXX\"><img src=\"images/myspace-icon.png\" class=\"icons\"></a>
    </div>

    </div>
    </div>

    <div class=\"menu\">
    <!--<ul id=\"navlist\"> -->

    <ul>
    <li><a href=\"XXXXXXXX/\">Home</a>
    </li>

    <li><a href=\"XXXXXXXX\">On-Air</a>

    </li>

    <li><a href=XXXXXXXX>Schedule</a>
    </li>

    <li><a href=\"XXXXXXXX\">News</a>
    <ul>
    <li><a href=\"XXXXXXXX\">News</a></li>
    <li><a href=\"XXXXXXXX/\">Sport</a></li>
    <li><a href=\"XXXXXXXX\">Traffic</a></li>
    </ul>
    </li>

    <li><a href=\"XXXXXXXX\">Local & Life</a>
    <ul>
    <li><a href=\"XXXXXXXX\">Local</a></li>
    <li><a href=\"XXXXXXXX\">Life</a></li>
    </ul>
    </li>

    <li><a href=\"XXXXXXXX\">VIP</a>
    </li>

    <li><a href=\"XXXXXXXX\">Photos</a>
    </li>

    <li><a href=\"XXXXXXXX\">TV</a>
    </li>

    <li><a href=\"XXXXXXXX/\">Events</a>
    <ul>
    <li><a href=\"XXXXXXXX\">Cinema</a></li>
    <li><a href=\"XXXXXXXX\">Theatre</a></li>
    <li><a href=\"XXXXXXXX\">Local</a></li>
    </ul>
    </li>

    <li><a href=\"XXXXXXXX\">Romance</a>
    </li>

    <li><a href=\"XXXXXXXX/\">Training</a>
    <ul>
    <li><a href=\"XXXXXXXX\">Art Awards</a></li>
    </ul>
    </li>

    <li><a href=\"XXXXXXXX\">Social</a>
    </li>
    </ul>
    </div>

    <div class=\"clear\"></div>
    <div id=\"ind-page-wrap\">
    <div id=\"page-content-page\">


    <div class=\"post\" id=\"post-62\">
    <h3>Photos</h3><br>



    <div class=\"album \">
    <a href=\"XXXXXXXX/photos?album=1\" title=\"View The Social Enterprise NW Event Album\"><img src=\"http://XXXXXXXX/wp-content/uploads/wppa/thumbs/13.JPG\" alt=\"View The Social Enterprise NW Event Album\" class=\"image\" /></a>
    <h3 class=\"name\"><a href=\"http://XXXXXXXX/photos?album=1\" title=\"View The Social Enterprise NW Event Album\">Social Enterprise NW Event</a></h3>
    <p class=\"description\">The Social Enterprise North West Event pictures</p>
    <br><br><a href=\"http://XXXXXXXX/photos?album=1\"><h3>View Pictures</h3></a>
    <div class=\"clear\"></div>

    </div>



    <div class=\"album alt\">
    <a href=\"http://XXXXXXXXphotos?album=2\" title=\"View The @XXXXXXXX Album\"><img src=\"http://XXXXXXXX/wp-content/uploads/wppa/thumbs/1.JPG\" alt=\"View The @XXXXXXXXAlbum\" class=\"image\" /></a>
    <h3 class=\"name\"><a href=\"http://XXXXXXXX/photos?album=2\" title=\"View The @XXXXXXXX Album\">@XXXXXXXX</a></h3>
    <p class=\"description\">For all those moments at our studios!</p>
    <br><br><a href=\"XXXXXXXX/photos?album=2\"><h3>View Pictures</h3></a>
    <div class=\"clear\"></div>

    </div>





    </div>


    <p><a class=\"post-edit-link\" href=\"XXXXXXXX/wp-admin/page.php?action=edit&amp;post=62\" title=\"Edit post\">Edit this entry.</a></p>
    </div>
    <div class=\"push\"></div>
    </div>

    <div class=\"clear\"></div>
    <div id=\"push\"></div>

    </div>


    <div id=\"footer\">
    <div id=\"footer-inside\">

    <p id=\"footer1\">&copy 2009 XXXXXXXX, All Rights Reserved</p>



    </div>

    </div>



    </div>

    </body>

    </html>
  • Start by validating. 95 errors on the page.
  • "apostrophe" said:
    Start by validating. 95 errors on the page.


    There are likely to be errors as i've had to take parts of the links out and change stuff around to not give anything away.

    I'm pretty sure this isn't a validation error, its something i'm doing wrong in the code/css.....Its a standard problem i've had before but this time want to get it fixed.

    Basically, when I float to the left in firefox, firefox does not see the wrap the floats within it and because the wrap does not have a set height as the height will change, it causes a problem.
  • It looks like you simply need a clear at the end of the floated items, but before the wrap div gets closed.

    .clear {
    clear:both;
    }

    <div class="clear"></div>
  • I'd agree with the doc without trawling through your code. either like the Doc said or you can just make the clear a break rather than using a div so <br style="clear:both" /> or add .clear {clear:both;} to your CSS and then <br class="clear" /> all the same thing really I just preffer to use a br tag rather than an empty div.

    Let us know if that helps
  • Thanks for all your help on this guys.

    I originally had cleared the float within the plugin itself but after adding another float clear within the actual page.php file, it worked a treat and has finally sorted itself out.

    Once again, thanks!