Empty div ignored for Responsive Grid?

Question

I'm working on a static, responsive HTML page.

I made a div with class 'row' then put another div with class 'col-2' that is empty then another div with class 'col-2' that has some text in it. This text should be displayed 16.6% away from the left most point of the browser. However, that's not the case unless I put something inside the first div with class 'col-2' - instead, it's putting that text at the left most point on the page, as if I didn't have a div with class 'col-2' before it.

I get that since the div is empty it's not being displayed but then how am I suppose to use the grid view exactly?

Code:

    <div class="section header">    
    <div class="row">
        <div class="col-2"></div>
        <div class="col-2">
            Title 
        </div>
    </div>
</div>

hafiz hafiz · Accepted Answer · 2017-02-04T01:23:57

divs are displayed as full-width blocks by default. If you want the col-2 class to display inline with a specified width, you need to declare it as such:

.col-2 {
    display: inline-block;
    width: 16.66666%
}

example: http://jsfiddle.net/dno5dzgL/5/

Empty div ignored for Responsive Grid?

1 Answers