0

I actually wrote here a whole page of text, but it was impossible to understand and putting a jsfiddle is just easier for you guys. here it is: http://jsfiddle.net/pMdZK/

the problem is links dont work, if they do hovers doesnt work and I have tried solutions like clearfix. Both "container" and "default" divs are essential to me and they are actually 2 images that meant to overlap each other(one is half-transparent, gif image with some parts missing. that is to change that image later for other stuff, while user is in page.) also changing

    position:absolute

doesnt seem to do much either.

purplecircles
  • 553
  • 2
  • 6
  • 8
  • http://stackoverflow.com/questions/16773989/when-div-with-absolute-position-is-added-cannot-click-on-links/16774057#16774057 – Nitesh Jun 12 '13 at 08:56

1 Answers1

0

Changing the padding-top of all items into margin solves your problem. The reason is that padding extends the entire entity while margin pushes the other entity's away.

http://jsfiddle.net/pMdZK/1/

You had:

#containerx #pl6
    {
        padding: 521px 0 0 120px;        
        position: absolute;
        font-size: 22px;
    }

You need:

#containerx #pl6
    {
        margin: 521px 0 0 120px;        
        position: absolute;
        font-size: 22px;
    }

change this for every item ofc.

The difference between margin and padding:

Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.

Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.

To further explain the difference i made a quick jsfiddle. http://jsfiddle.net/GRLkt/

The padding box expands the entire div. (as you can see by the background image).

The margin box pushes the other content away.

Marco Geertsma
  • 803
  • 2
  • 9
  • 28
  • What are the same? The links are clickable now. Thats the thing i understood was wrong. – Marco Geertsma Jun 12 '13 at 09:04
  • oh yea i got it now sorry im dumb. I will accept answer as soon as I can(stackoverflow puts 15 minute limit). can you explain why it is like that ? I mean padding is for a box is it not ? isnt padding supposed to be right thing to use here ? – purplecircles Jun 12 '13 at 09:08