Grow your CSS skills. Land your dream job.

Overflow Problems

  • # December 26, 2012 at 10:57 am

    My #container div sets a 15px margin on the top and bottom. Unfortunately, the bottom margin does not seem to be working unless overflow:hidden is set. [Check the sidebar on the homepage for an example](http://themeforward.com/demo2/ “”).

    I can’t set overflow:hidden on #container because the sub-menu will be hidden under the footer on shorter pages. For example at [http://themeforward.com/demo2/?page_id=1846](http://themeforward.com/demo2/?page_id=1846 “”) when I set overflow:hidden on container the sub-menu under ‘Categories’ becomes hidden.

    My current CSS

    #container {
    max-width: 960px;
    margin: 15px auto
    }

    # December 26, 2012 at 11:07 am

    Because you’ve floated your sidebar, the container is only growing to the height of main content. You just need to add a [clearfix](http://css-tricks.com/snippets/css/clear-fix/ “http://css-tricks.com/snippets/css/clear-fix/”) to the container element and the container will grow to the height of the sidebar and the margin-bottom will be applied.

    # December 26, 2012 at 11:08 am

    The sidebar is breaking out of the container because it’s not cleared. You’ll need to use a clearfix on the container — setting “overflow:hidden;” on it would be one way but since you can’t use that, you’ll need another way (having said that though, I didn’t see any problems with the submenu even when the container DOES have overflow:hidden;).

    Try adding the following code in your CSS and then add a class “clearfix” to your container.

    .clearfix:before, .clearfix:after {
    content: ” “;
    display:table;
    }

    .clearfix:after {
    clear:both;
    }

    # December 26, 2012 at 11:33 am

    Clearfix doesn’t seem to be working for some reason.

    # December 26, 2012 at 11:41 am

    Looks like you (still) haven’t applied the class “clearfix” to #container, so it’s hard for us to check why it’s not working then.

    # December 26, 2012 at 11:50 am

    Sorry about that, it is applied on templates individually which I need to change… but it can be viewed here [http://themeforward.com/demo2/](http://themeforward.com/demo2/ “”)

    # December 26, 2012 at 12:18 pm

    No clearfix class anywhere in that one either.

    # December 26, 2012 at 1:01 pm

    Sorry, I tried to combine them in the same DIV class and it wasn’t working. I’m curious if there is a way to achieve this without adding another DIV.

    # December 26, 2012 at 1:08 pm

    You don’t need to add another DIV at all, you really just need to add the class “clearfix” to the existing container div and make sure the code that I posted above is somewhere in your CSS file.

    # December 26, 2012 at 1:13 pm

    Ok, sounds good! Thanks Senff. Will using the display:table property negatively impact how a site looks in older browsers?

    # December 26, 2012 at 1:35 pm

    Nope, don’t think it should.

    # December 26, 2012 at 2:09 pm

    @siouxfan45, IE7 does not support display-table attribute.

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

You must be logged in to reply to this topic.

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