• # 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]( “”).

    I can’t set overflow:hidden on #container because the sub-menu will be hidden under the footer on shorter pages. For example at []( “”) 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]( “”) 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: ” “;

    .clearfix:after {

    # December 26, 2012 at 11:33 am

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    Sorry about that, it is applied on templates individually which I need to change… but it can be viewed here

    # December 26, 2012 at 12:18 pm

    No clearfix class anywhere in that one either.

    # December 26, 2012 at 1:01 pm

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

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