Question

I have an <a> surrounding a <div> which also has some images, a <h2> and a paragraph of text. The <a>‘s all are inline-block. Whenever the H2 extends on to two lines the next <a> is offset. Below is a screenshot.

HTML:

<a href="#">
    <div>
        <div class="imgOverflow">
           <img src="/hello/there">
        </div>
        <h2>This is the title</h2>
        <p>This is a paragraph</p>
    </div>

</a>

CSS:

a {
    display:inline-block;
    font-size:16px;
    border:1px solid grey;
    width:260px;
    margin:5px;
    color:black;
    overflow: hidden;
}
div {
    display:block;  
    padding:5px;
    width:250px;
    height:300px;
}   
p {
    font-size:12px;
    text-align:justify;
 }
h2 {
    margin:5px 0 10px 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.imgOverflow {
    margin:-5px 0 0 -5px;
    width:260px;
    padding:0;
    overflow:hidden;
    height:130px;
    display:block;
}       

If anybody knows some sort of CSS property to avoid this that would be extremely helpful. Thank you.

Answer 1

I guess that’s because your a element is vertically aligned to bottom and your some of your h2 elements are spanning across two lines while the last ones are only one line. Try this:

a { 
display:inline-block;
font-size:16px;
border:1px solid grey;
width:260px;
margin:5px;
color:black;
overflow: hidden;
vertical-align: top; /* Notice this line */
}

A working example

EDIT

This edit comes after imray’s question.

I’ve tested the code once again in Ubuntu 12.04 LTS – Chrome 33.0.1750.152 after almost 2 years this question has been replied, and found out that – now – when you remove vertical-align property the code tends to work as well. However, together with that if you remove the overflow property then you will see that display breaks.

Now, imagine the following case:

This is our container:
------------------------------------------------
|                     Element 2:               |
|    Element 1:       --------------------     |
|    -------------    | Lorem ipsum dolor|     |
|    | Lorem ips |    | sit amet         |     |
|    -------------    --------------------     |
------------------------------------------------

When default values are on element 1 and element 2 will be aligned to the baseline of their container and this baseline changes – obviously – according to the height of the container, which at the end gets determined by the height of their children – if otherwise not specified.

Apparently, by the time of writing – as css implementation of browsers tend to change by time, removing vertical-align: bottom and leaving the overflow: hidden seems to make the code work – not tested in other browsers -, but then again simply aligning them to top, should resolve the problem completely because when you align to the top, the elements in the next lines will be aligned to the top of the line.