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>
        <title>CSS Inline Block Positioning</title>
        <div class="wrapper">
            <div class="poster">one</div>
            <div class="poster">two</div>
            <div class="poster">three</div>
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;
© 2020 Kevin Jung