CODEWITHSUNDEEP
htmlcssanchor
pug
pug

Reputation: 33

Bug negative margin with anchor

I use a negative margin-bottom to get n DIVs with equal height (I use this method : http://abcoder.com/css/css-equal-height-columns "Three column layout – equal height using pure CSS")

But this is not working with anchor links.

The top part of div just disappear.

Here is my example : http://club-scpi.com/bug.php

This is so strange ! What am I missing ?

Upvotes: 2

Views: 1692

Answers (2)

whatdafrak
whatdafrak

Reputation: 591

I had the same situation where I had a negative margin on my footer , and anchored links chopped the top of my page and shifted it to the bottom when clicked on. I had a

tag inside the footer with copyright info and moved the negative margin from the to the

and worked like a charm. Not sure it applies directly to this situation but might help someone.

Upvotes: 0

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

this is not a bug and works as html and css intended

 #container {
    overflow: hidden;
 }

is causing the content inside the div ( when told to go to the anchor point ) to scroll UP to

 <a name="test">

as the overflow is set to hidden, it appears to - disapear. It is just "hidden"

change to 

   #container {
     overflow: auto;
   }

and you will see what is happening.

As an aside, I am not a fan of the this proposed method for creating equal height divs, ( one of the reasons why is what you have just highlighted ) , all depends on what the particular job is.

Alternatives are; the use of background colours, % heights, px heights, or just fab and up front content design considerations before we set to marking up.

Then there is javascript , it can follow up and tidy up boxes here and there in terms of size ( worth looking into also )

... always keep it as simple as possible.

Upvotes: 4

Related Questions