Grow your CSS skills. Land your dream job.

Need Some Assistance With A Margin Issue Please

  • # October 16, 2012 at 8:42 pm

    Fellow coders,

    At the bottom of this page:

    http://garrisonassetmanagement.com/newflexmenu2.html

    is a 100% wide footer framed in a 3px yellow box.

    I would like to put margin left and margin right on this so that it is inline with the boxes above.

    When I add margin-left: 1em; it correctly applies the margin, but it pushes the right edge of the box 1em off the right side of the page.

    When I add margin-right: 1em; it does not apply this margin.

    Any ideas, thoughts or suggestions will be most appreciated.

    Thanks in advance.

    Glenn

    # October 16, 2012 at 8:54 pm

    remove the width, remove the float, add clear: both; and overflow: hidden;

    to the footer sections above it, add a bottom margin to push it down.

    # October 16, 2012 at 9:16 pm

    That is expected behavior; applying margin doesn’t change the width of an element when it has a specified width. The best way to solve your problem would be to remove the specified width, and stop floating the element. Instead, use the clear property (i.e. clear: left;).

    # October 17, 2012 at 12:28 am

    @wolf, @josh,

    Very nice guys….thanks much for your help. Works perfectly.

    How do guys come to know these arcane little twists and turns? Is there any hope for me getting there?

    Thanks again.

    Glenn

    # October 17, 2012 at 1:14 am

    Haha, all from learning, as you are doing. The experience just comes from making many little mistakes, and finding the fix for them :)

    # October 17, 2012 at 6:16 am

    I’d add a 1em padding to the footerwrapper element, them remove left and right margins on its children.
    This way, you’re sure everything is right. Plus, if some day you want to change this 1em value to 2em, you have only one line to change.

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

You must be logged in to reply to this topic.

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