The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need Some Assistance With A Margin Issue Please

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #40334

    Fellow coders,

    At the bottom of this page:

    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.



    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.


    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;).


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



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

    Kitty Giraudel

    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)
  • The forum ‘CSS’ is closed to new topics and replies.