Alignment problem with inline-block CSS attribute

Question

grid view

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?

Could you provide a URL to the page (if possible)? As it would be easier to see any problems that could be causing that. — Nathan, Sep 06 '11 at 00:33
I uploaded a temporary link here: http://www.prism.gatech.edu/~jstrauss6/jrstrauss.net%20temp/original/myWork.html — Russell Strauss, Sep 06 '11 at 00:55
or is there an alternate method to accomplishing the same task? — Russell Strauss, Sep 06 '11 at 01:05
There might be a different way to do this. But, as Jason said below, the extra `
` might be causing that. Have you tried removing that? — Nathan, Sep 06 '11 at 01:06

kazinix · Accepted Answer · 2011-09-06T01:38:36.933

4

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.

edited Sep 06 '11 at 01:38

answered Sep 06 '11 at 01:06

kazinix

28,987
33
107
157

+1 This is 100% correct... I just changed it to `text-align: center;` in Chrome Developer Tools and it worked. See this screenshot: http://screencast.com/t/CWZ93DYVbgh – Nathan Sep 06 '11 at 01:20

Jason Gennaro · Answer 2 · 2011-09-06T01:14:43.910

Hard to tell without seeing the extra HTML and CSS but it could that you have link break or some white space or another element in there, before the last closing div, that is causing the last line to render differently.

EDIT

Had a look at the page you posted just now and @domanokz is right: change

div.contentText {
    text-align: justify;
}

to

div.contentText {
    text-align: center;
}

Also removed that extra br, although it was not necessary for the fix.

Alignment problem with inline-block CSS attribute

2 Answers2