Text pushes <div> down

Question

I'm creating a small shop in simple html. Each buyable item has its own box where I will later insert the item's name and picture.

My problem however, is when I enter an item name that takes 2 rows or more to fit, because then all other boxes get pushed down as well:

I have some 500 rows of code so I will just paste what I think is relevant to the problem:

CSS:

.packitem{
    background-image: url("");
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
    border-radius: 10px;
    padding: 4px;
    margin: 12px 3px 0 3px;
    display: inline-block;
}
.packitem a.boxlink{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.boxtext{
    font-size: 16px;
    font-family: verdana;
    color: #fff;
    vertical-align: top;
}

HTML:

<div class="packages1">
<div><font class="packfont">Packages</font></div>
    <div class="packitem">
        <a href="javascript:void(0)" class="boxlink" onclick = "document.getElementById('pack1').style.display='block';document.getElementById('fade').style.display='block'"></a>
        <div id="pack1" class="white_content">
            <font class="descriptiontitle">Item 1</font>
            <p class="descriptiontext">Dummy text</p>
            <a href="javascript:void(0)" onclick="document.getElementById('pack1').style.display='none';document.getElementById('fade').style.display='none'">
                <p class="closelink">Close</p>
            </a>
        </div>
        <font class="boxtext">Item 1</font>
    </div>

I managed to fix the issue by having display: inline-flex instead of display: inline-block , but that messed text-alignment up.

Any ideas of what's wrong?

Thanks.

Answer 1

You are close but vertical-align: top; should be applied to the items that are to align.

In your case this should be the boxes

.packitem{
    background-image: url("http://www.dedicatedrejects.com/pics/blockblue.jpg");
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
    border-radius: 10px;
    padding: 4px;
    margin: 12px 3px 0 3px;
    display: inline-block;
    vertical-align: top;
}

BTW: <font class="descriptiontitle">Item 1</font> should not be used...it's invalid HTML

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font