Hi Again

Another issue with webproject - I had everythign fine with divs and etc, but the issue was footer#2 which had somehow ghost heighte after 30px background image then you see gap below - I do not think it anything relate to paragraph code I have use.

Is I am having oversight on my error somewhere? I am not sure where this ghost padding/margin is coming from

  • With fresh mind today after good sleep, I had another look and notice in dreamweaver that there is margin os 191px and there is no outside element that is defining auto margin for this, I even delete two margin: 0 auto which didnt even had any impact. speaking of .footer2 p - this is for paragraph? chris keeley over 8 years ago

3 answers


Margin size still remain the same - I do not know why the margin is being render like this, I want it to be smaller but it cant, the advice given by two above didnt help with issue unless I did them wrong - for now I have "expand" and fill in rest of blank space with colour/background image for now - very dissappointed with this issue

Answered over 8 years ago by chris keeley

In this case you have set a fixed height and overflow:hidden on a box that needs to be bigger than 30px high to contain the content.

change the height. (overflow:hidden is a (hack) way to shrinkwrap float containers, not a universal panacea)

Answered over 8 years ago by Tony Crockford
  • Using overflow that way is actually not a hack. It's a weird side effect but it's still clearly defined in the standards. Guffa over 8 years ago
  • I meant using it to wrap floats is not the way it was intended, which is to hide excess content! - hence applying it to everything (including fixed height divs) will have undesired resuts - as per here. Tony Crockford over 8 years ago
Guffa 316

As Tone pointed out, it's the overflow:hidden that is hiding what's outside the specified height.

Remove the overflow and height settings from the footer. This will however make the margin of the paragraph to collapse outside the footer, so you will have to use something else for the spacing around the text in the footer.

You can use padding instead of margin:

.footer2 p { margin: 0; padding: 20px 0; }

Or you can use line-height:

.footer2 p { margin: 0; line-height: 60px; }
Answered over 8 years ago by Guffa
  • I nearly always add 1px padding to the top and bottom of any container divs and then adjust margins appropriately. A border is the only other device for uncollapsing margins: http://complexspiral.com/publications/uncollapsing-margins/ Tony Crockford over 8 years ago