CODEWITHSUNDEEP
htmlalignmentcss
Russell Strauss
Russell Strauss

Reputation: 1200

Alignment problem with inline-block CSS attribute

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?

Upvotes: 2

Views: 716

Answers (2)

kazinix
kazinix

Reputation: 30093

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.

Upvotes: 4

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.

Upvotes: 2

Related Questions