Use Case #3: Fixed Gutters Without Parents

by infous

HTML

<div class="a">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil velit nam iste porro optio hic consectetur laboriosam iusto obcaecati unde dolorem ut architecto veritatis suscipit a ratione fuga molestiae.
</div>

<div class="b">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae debitis maxime commodi autem vel neque similique enim consequuntur voluptas aspernatur provident delectus ea alias culpa nesciunt omnis rerum. Ut amet!
</div>

CSS

body {
    padding: 20px;
}

.a,
.b {
    float: left;
    color: #fff;    
}

.a {
    background: red;
    margin-right: .5em;
    width: calc(40% - .5em);
}

.b {
    background: blue;
    margin-left: .5em;
    width: calc(60% - .5em);
}