CODEWITHSUNDEEP
htmlcss
dantdj
dantdj

Reputation: 1267

Last row of div grid is slightly out of alignment

enter image description here

As you can see in the image above, the last row of div squares is slightly out of alignment, and it's driving me crazy as to why it's happening.

JSFiddle link: https://jsfiddle.net/ue936Lnn/

(HTML has been shortened to save pasting several hundred lines of the same thing.)

HTML

<body>        
    <div id="main_container">            
        <div id="content_container">
            <div id="square_container">
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <br>
                <div class="tone_square"></div>
                ...

                <div class="tone_square"></div>
                <br>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
            </div>
        </div>
    </div>
    </body>

CSS

body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #15181A;
}

#content_container {
    height: 100%;
    width: 100%;

    margin: 0 auto;
}

.tone_square {
    height: 25px;
    width: 25px;
    background-color: white;

    display: inline-block;
    padding: 5px;
}

#square_container {
    text-align: center;
    margin-top: 100px;
}

Upvotes: 2

Views: 49

Answers (1)

V Maharajh
V Maharajh

Reputation: 9639

Here is a forked version of you jsfiddle, with the problem solved: https://jsfiddle.net/vivmaha/caq07de2/

Whenever you use inline elements, you've got to watch out for hidden font-effects (since inline is text-based). You can solve this by either avoiding inline for non-text elements, or by setting font-size:0 to eliminate font effects.

In your case, I set font-size:0; on #square_container and the issue went away.

(I also had to add margin:2px; to .tone_square to counter for the lost font-spacing).

Upvotes: 2

Related Questions