Grow your CSS skills. Land your dream job.

Floating Problem

  • # June 22, 2009 at 8:55 am

    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)….

    Code:
    .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.

    # June 22, 2009 at 9:26 am

    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.

    # June 22, 2009 at 9:40 am

    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…..

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


















    Now Playing….

    Photos

    View The Social Enterprise NW Event Album

    Social Enterprise NW Event

    The Social Enterprise North West Event pictures


    View Pictures

    View The @XXXXXXXXAlbum

    @XXXXXXXX

    For all those moments at our studios!


    View Pictures

    Edit this entry.

    # June 22, 2009 at 10:07 am

    Start by validating. 95 errors on the page.

    # June 22, 2009 at 10:11 am
    "apostrophe" wrote:
    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.

    # June 22, 2009 at 4:26 pm

    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>

    # June 23, 2009 at 9:24 am

    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

    # June 23, 2009 at 12:52 pm

    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!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".