CODEWITHSUNDEEP
htmlcsshyperlink
Banzboy
Banzboy

Reputation: 113

Why is the parent Div getting linked?

I have a Div inside of another. The child Div is a link starts a javascript animation (by animating the css properties) and the reason why I put in a wrapper is because I wanted to have the child be centred and float. So the child Div does the centering and the parent does the float. The reason is because you can't do margin:0 auto; with a float: property.

Now my problem is that when I put a link around the child Div, the parent Div gets linked too! It's really baffling me at the moment. This happens in Chrome and Firefox but strangely enough it does no happen in IE! Does anybody know what's wrong?

The parent is #eastereggwrapper and the child is #eastereggbutton. Here are the code snippets, my HTML:

<div id="eastereggwrapper">
  <a href="" class="secret" >
    <div id="eastereggbutton" >
      Don't Click Me
    </div>
  </a>
</div>

and my CSS:

#eastereggwrapper {
    background-color: black;
    bottom: 0px;
    width: 100%;
    position: relative;
    float:left;
}

#eastereggbutton {
    margin:0 auto;
    width:10%; 
    height:50px;
    background-color:green;
    color: black;
    font-size:18px;
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
}

P.S. The secret class is not defined, it's used for the Javascript code.

Upvotes: 0

Views: 40

Answers (2)

Romain Pellerin
Romain Pellerin

Reputation: 2480

Just add

#eastereggwrapper > a {
    width:10%;
    display: block;
    margin:auto;
}

to your CSS and remove

margin:0 auto;
width:10%;

from the properties of #eastereggbutton

Upvotes: 1

Albert Xing
Albert Xing

Reputation: 5788

Try one of two things:

  1. Place the <a> inside of the second div
  2. Replace the child div with the <a> tag:

HTML

<div id="eastereggwrapper">
  <a href="" class="secret" id="eastereggbutton">
      Don't Click Me
  </a>
</div>

CSS

#eastereggbutton {
    display: block;
    margin:0 auto;
    width:10%; 
    height:50px;
    background-color:green;
    color: black;
    font-size:18px;
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
}

Upvotes: 1

Related Questions