Footer (basement) in the opera, Mozilla and Google a little (2-3 pixels) runs over the frame of the diva-container. Everything is fine in IE. Although not very noticeable, but why is this happening? Like the div footer is inside. With other blocks, everything is fine. I have a div container and three divas in it: Header, Content, Footer. The width is fixed at all by 850 pixels. Here is the css code:

body{ background:#CFF; width:auto; padding-left:50%; margin:0; } #main{ width:850px; border:10px groove #99F ; background:#FEFEFE; margin-left:-425px; padding:0; } #header1{ background-image: url(images/header1.jpg); width:850px; height:128px; background-repeat:no-repeat; } #glav{ float:left; width:auto; margin-left:20px; font:italic 18px bolder Arial, Helvetica, sans-serif; } #menu{ float:left; width:auto; clear:left; margin-left:20px; font:italic 18px bolder Arial, Helvetica, sans-serif; } #ist{ float:left; width:auto; clear:left; margin-left:20px; font:italic 18px bolder Arial, Helvetica, sans-serif; } #content{ width:auto; margin-left:50px; margin-right:50px; text-align: justify; } p{ text-indent:2em; } #footer{ background-image: url(images/footer.jpg); width:850px; height:30px; background-repeat:repeat-x; margin-top:500px; font-size: 9px; text-align:right; padding-right:10px; padding-top:5px; }

And when there is no indentation around the text - everything is fine, but it is worth adding indents - everything moves down this way, and without indents is ugly, the text presses up and to the right.

  • So smarter. But even better is a piece of typesetting, if my answer does not help: - knes

2 answers 2

It is enough to specify the width only for #main. In Header, Content, Footer, the width is not necessary to specify (they stretch to the width of the parent).

The total width of the element is summed from the given width and its indentation. Since the width is clearly defined (850) and there is an indent (5) - the total width of the element = 855 (instead of the required 850). This rule also applies to the height of the element. To solve such problems, do not specify the width of the element and set the display: block property; (for non-block elements), then the total width of the element will always be 100% of the width of the parent.

 #footer{ background-image: url(images/footer.jpg); height:30px; background-repeat:repeat-x; margin-top:500px; font-size: 9px; text-align:right; padding-right:10px; padding-top:5px; }

PS: As for the css reset it is said correctly. To achieve cross-browser compatibility, its use is mandatory.

    There is such a thing - CSS RESET , which resets everything that is possible. Here you need to start sculpturing the layout with it.
    If it does not help - Conditional comments to help you.

    PS The question is too general, therefore the answer is general. If there is a specific piece, it will be possible to understand

    UPD:
    start with the fact that the footer you have padding. It automatically increases the width by its size:

     width: 200px; padding: 30px;

    total width will be - 260px: width + 2 padding.

    • Thanks, I will try. - Regina