blog and things oh hi there!
CSS positioning with inline-block

For the longest time, I have been using float: left; and clear: fix; to position elements but you can achieve the same effect using the display property. Here is a little demo on how it works.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Inline Block Positioning</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="poster">one</div>
            <div class="poster">two</div>
            <div class="poster">three</div>
        </div>
    </body>
</html>
html, body {
    width: 100%;
}

.wrapper {
    width: 800px;
    margin: 0 auto;
    font-size: 0;
}

.poster {
    font-size: 1rem;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    height: 50px;

    /* Legacy browser support */
    zoom: 1;
    *display: inline;
}
© 2019 Kevin Jung