Question

I’m trying to create a grid menu on a web site. I am using display: inline-block to do so and it works very well, but for some reason, the last row doesn’t line up.

I tried display: inline-table which works just as well but has the same problem. Each square with text is contained within a div that has the display attribute set to inline-block.

<div class="parcel">
    <a href="http://www.pizzahut.com">
    <img src="../img/computerGraphics.jpg"/>
    Computer Graphics </a>
</div>
<div class="parcel">
    <img src="../img/web.jpg"/>
    Web
</div>
<div class="parcel">
    <img src="../img/photography.jpg"/>
    Photography
</div>
<div class="parcel">
    <img src="../img/models.jpg"/>
    3D Modeling
</div>
<div class="parcel">
    <img src="../img/games.jpg"/>
    Games
</div>
<div class="parcel">
    <img src="../img/graphicDesign.jpg"/>
    Visual Design
</div>
<div class="parcel">
    <img src="../img/animation.jpg"/>
    Animation
</div>
<div class="parcel">
    <img src="../img/illustration.jpg"/>
    Illustration
</div>
<div class="parcel">
    <img src="../img/other.jpg"/>
    Other
</div>

Does anyone know why the last row would do this?

Answer 1

text-align: justify; of your contentText div causes the small divs to have spaces in between, depending on the content of the divs. Try removing the text-align: justify; or change it to text-align:center from contentText and it will work fine.

I find this weird though, I tried using justify and the last line always not justify like in a newspaper.