Proper way to layout anchor, image and div

Question

I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout

<div id="links-block">          
    <a href="http://www.google.com"><div id="edit-quote-button"></div></a>
    <a href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
</div>

Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.

@Cherniv That's weird. I just ckecked all browsers I have, only IE works fine. Chrome and firefox have the same problem — Andrew Liu, Jul 29 '13 at 06:34

score 1 · Accepted Answer · answered Jul 29 '13 at 06:41

1

Define this css

    a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line 
color: #999999;
}

Demo

answered Jul 29 '13 at 06:41

Rohit Azad Malik

31,410
17
69
97

It seems to work. But I am just don't understand what this line does actually – Andrew Liu Jul 29 '13 at 06:46
because a is inline block elements and you used to inner div div is a block level elements than i change the a value inline into inline-block element than it's work – Rohit Azad Malik Jul 29 '13 at 06:49
More clearfication http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – Rohit Azad Malik Jul 29 '13 at 06:50

score 1 · Answer 2 · answered Jul 29 '13 at 06:49

here is your new html structure

 <div id="links-block"> 
  <a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
  <a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
  <div class="clear"></div>
</div>

add this css to your css file

.g-link{
   display:block;
   float:left;
 }
 .y-link{
   display:block;
  }
 .clear{
   clear:both;
   height:0px;
   width:0px;
   display:block;
}

hope this will work for you

score 1 · Answer 3 · answered Jul 29 '13 at 06:52

1

It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.

answered Jul 29 '13 at 06:52

ralph.m

13,468
3
23
30

Proper way to layout anchor, image and div

3 Answers3