Grow your CSS skills. Land your dream job.

[solved] div doesn’t expand to fit contents

  • # July 8, 2009 at 4:09 pm

    Hi,

    I’m using the 960 framework but I’m having a problem with the contents div, it doesn’t expand to fit the contents, the text goes over the footer…

    In html I have:

    Code:

    Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu tortor ac mi pulvinar eleifend. Nulla facilisi.

    And in css I have:

    Code:
    div#contents {
    background-color: #FFFFFF;
    }

    div#texts {
    text-align: left;
    }

    Any help on this? Thank you!

    # July 8, 2009 at 4:18 pm

    What are the styles for "container_12" and "grid_12"?

    One of my biggest gripes with the 960 grid is that people that don’t necessarily know what they’re doing don’t change the names. "Container_12" is absolutely meaningless, the names should be "main-content", "side-bar", "header", "footer", "twitter-feed", etc etc.

    The 960 idea is great, and that’s what I use as a max width for all of my sites, but I think downloading the frame work is a waste of time…

    I will end my tangent there.

    It sounds like you have something floated that you haven’t cleared. Try adding <div style="clear:both"></div> after the content and see if that helps.

    Also, if you could provide a working link, you would get immediate help/results!

    # July 9, 2009 at 3:03 am

    ok, here is a link:

    http://www.crescendomusical.net/teste54 … anhia.html

    Thank you for your help!

    # July 9, 2009 at 3:41 pm

    Ok, I found the problem…

    I’m using 960 framework with multiple containers, and inside each container I only use one grid full width.
    As I have only one grid for each container I though I didn’t need any clear floats, but I was wrong, as each grid is floated…

    So I just had to add <div class="clear"></div> after each <div class="grid_12">…</div> and now it’s working!

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

You must be logged in to reply to this topic.

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