Grow your CSS skills. Land your dream job.

[Solved] float and clear – taking too much or too less space

  • # July 25, 2010 at 5:42 pm

    Hi,

    I hope, you could help me, because I don’t even see the forest anymore with that many trees and the site is an urgent client work.
    The site, I’m talking about is http://bit.ly/cJ2kPN
    On of the sub-sites (http://bit.ly/9vcaN0), you’ll notice the big gap above the line with " Schwarz/Weiss Negativ Bild 24 x 36 mm". the gap is generated on one side with a padding of 10px but on the other side by the end of the #navigation (the stuff with the gradient). And I just don’t know why (this is the first problem).
    The second problem appears on e.g. http://bit.ly/ceNMx3 (don’t try the forms :)), where the #content (the white stuff) doesn’t fill the space down to the footer (but it should). This problem is also caused by the #navigation (probably).
    Basically the structure is

    Code:
    #container -> gradient [
    #header
    #navigation -> floats left, 180px wide
    #content -> margin-left of 180px, no float
    #footer -> clears both
    }

    And the files are (more or less) valid.
    EDIT: the problem is in every modern browser
    If you have questions, just ask them!
    Thank you very much for your (hopefully fast) help!!! :D

    Linus

    # July 26, 2010 at 3:22 am

    thanks for your help, but it didn’t work (see this screenshot). The gap is still there (see "1" [with the gap] vs. "2" [without the gap; correct])

    # July 26, 2010 at 7:28 am

    solved problem #2 in the meantime with Faux Columns :D, but #1 is still existing :(

    # July 26, 2010 at 8:22 am

    Well in Firefox it’s currently a complete mess as you need an overflow:hidden on the product class

    # July 26, 2010 at 10:47 am

    wow! – it works! :D Thank you very much!

    Linus

    PS: could a moderator or an admin rename the topic to "[Solved] …"?

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