Grow your CSS skills. Land your dream job.

Box float problem

  • # March 13, 2013 at 6:26 am

    Hi everybody,
    I’ve an obscure problem concerning css float, on my page : http://www.constantstuff.com/hub/
    All my blocks have same height and width (I’ve checked with firebug).
    In firefox, if you scroll down, some blocks don’t want to float, like if the text blocks (yellow) where higher than the other ones?

    Thanks in advance for your help.

    # March 13, 2013 at 7:23 am

    .col indeed has a padding if 0.5% for both sides which could cause issues. The main issue however is caused by the div.dummy that is in the text blocks. It apparently has a percentage height that might’ve been correct for some other font, but is now incorrect for the new one. So you’d need to adjust that. It would be better though if the .txt blocks didn’t have to be absolutely positioned and since all your images use a specific height why not just go ahead and give all blocks the same height in pixels? That way you don’t need absolute positioning for the .txt block, you can throw div.dummy away and cleanup syntax to something that is a bit easier to follow.

    # March 13, 2013 at 7:29 am

    >.col indeed has a padding if 0.5% for both sides which could cause issues

    Merri is referring (I think) so something I posted and then deleted as I couldn’t think why it should affect anything.

    However, I think he might have nailed it with the rest.

    # March 13, 2013 at 8:18 am

    Woaw, I didn’t imagine that, you’re totally right, the .5% padding causes that.
    What can I do if I want to keep fluid column ?
    What is the link with the text boxes ? Do I have to change something in the text-boxes css to make it works ?

    Ty!

    # March 13, 2013 at 8:22 am

    >you’re totally right, the .5% padding causes that

    Not sure it does….it shouldn’t with border-box set.

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

You must be logged in to reply to this topic.

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