CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 1461

CSS inline-block acting as float

I'm currently building a site that uses a nice grid structure using inline-block instead of floats.

In a nutshell, my grid works like so (JSFiddle):

HTML

<div class="grid">
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
</div><!-- .grid -->

CSS

.grid {
    text-align: justify;
    font-size: 0;
}
.grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

Now if we take a look at this page: http://bit.ly/1AJM9Qt, it works as it should like in the JSFiddle.

However, when I use the exact same method on this page: http://bit.ly/1zezIIx, each div acts as if it has a float applied instead of inline-block. Each div should distribute equally.

I really cannot see any difference in the two pages and cannot understand why this is happening.

Upvotes: 2

Views: 164

Answers (2)

Aaron
Aaron

Reputation: 10450

Have you tried adding margin to each of the grid items to separate them?

.half:nth-of-type(odd) {
  margin-right: 4%;
}

Upvotes: 0

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

bit.ly/1zezIIx has no whitespace between the divs so they can't be justified to fit the parent width. If you add a space between the divs and they should act as you expect them to.

Example without whitespace (content is not justified)

.grid {
    text-align: justify;
    font-size: 0;
}
.grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 4%;
    background: red;
}
p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.75;
}
<div class="grid"><div class="half"><p>Here's some content</p></div><div class="half"><p>Here's some content</p></div><div class="half"><p>Here's some content</p></div><div class="half"><p>Here's some content</p></div></div>

Example with whitespace (content is justified)

.grid {
    text-align: justify;
    font-size: 0;
}
.grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 4%;
    background: red;
}
p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.75;
}
<div class="grid">
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
</div>

Upvotes: 3

Related Questions