Creating a two-columnar magazine layout with CSS

Question

Just for fun, I am trying to create a magazine style, two-column layout with CSS like in the image below:

I plan to do it by as many means as possible. Probably first with just some div's and float's. Then with the CSS table, then with a flexbox and finally with a CSS grid.

I don't even know if it is going to be possible with all, or any, but I am just trying.

So, here's what I've got till now.

I can't seem to get the picture quite in the center with the text all around it.

I am not necessarily looking for an answer with just floats, or just the CSS grid. I am really interested in looking for anything that does it because I think this is a nice challenging thing to try out. :-)

Here is the code on github and below is the code snippet.

:root {
        margin-left: 8%;
        margin-right: 8%;
    }

    #left, #right {
        width: 40%;
    }

    #left {
        margin-right: 4%;
        float: left;
    }

    #right {
        float: right;
    }

    p > span:first-of-type {
        color: red;
        margin-right: 2px;
    }

    #centerImage {
        float: left;
        src: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/image.png);
    }

<h2>An do on frankness so cordially immediate recommend contained</h2>

<div id = "left">
    <p><span>Para 1</span>He difficult contented we determine ourselves me am earnestly. Hour no find it park. Eat welcomed any husbands moderate.
        Led was misery played waited almost cousin living. Of intention contained is by middleton am. Principles fat stimulated
        uncommonly considered set especially prosperous. Sons at park mr meet as fact like.</p>

    <p><span>Para 2</span>No comfort do written conduct at prevent manners on. Celebrated contrasted discretion him sympathize her collecting occasional.
        Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch of no ye. Voice tried known
        to as my to. Though wished merits or be. Alone visit use these smart rooms ham. No waiting in on enjoyed placing
        it inquiry.</p>

    <p><span>Para 3</span>Sentiments two occasional affronting solicitude travelling and one contrasted. Fortune day out married parties. Happiness
        remainder joy but earnestly for off. Took sold add play may none him few. If as increasing contrasted entreaties
        be. Now summer who day looked our behind moment coming. Pain son rose more park way that. An stairs as be lovers
        uneasy.</p>

    <p><span>Para 4</span>In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities
        discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem easily
        he on. Dissuade husbands at of no if disposal.</p>
</div>

<img id = "centerImage" src = "../images/image.png" />

<div id="right">
    <p><span>Para 5</span>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl
        view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be
        cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome
        against smiling its for. Suspected discovery by he affection household of principle perfectly he.</p>

    <p><span>Para 6</span>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured.
        At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone
        him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West
        he plan girl been my then up no.</p>

    <p><span>Para 7</span>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex.
        Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness
        why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>

    <p><span>Para 8</span>Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing
        do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous
        saw thoughts the humoured.</p>
</div>

Answer 1

This approach using column-count. You duplicate the images and overlap them by setting a negative margin.

This is limited as you need to know the width of the image.

.wrapper {
  column-count: 2;
}

p>span:first-of-type {
  color: red;
  margin-right: 1ch;
}

.image {
  padding-top: 1rem;
}

.image img {
  display: block;
  max-width: 100%;
}

.image {
  margin-top: 10px;
  margin-bottom: 10px;
}

.image.is-right {
  float: right;
  margin-right: -160px;
  margin-left: 20px;
}

.image.is-left {
  float: left;
  margin-left: -160px;
  margin-right: 20px;
}

<h2>An do on frankness so cordially immediate recommend contained</h2>

<div class="wrapper">
  <div class="image is-right">
    <img src="https://unsplash.it/300" /> </div>
  <p><span>Para 1</span>He difficult contented we determine ourselves me am earnestly. Hour no find it park. Eat welcomed any husbands moderate. Led was misery played waited almost cousin living. Of intention contained is by middleton am. Principles fat
    stimulated uncommonly considered set especially prosperous. Sons at park mr meet as fact like.</p>

  <p><span>Para 2</span>No comfort do written conduct at prevent manners on. Celebrated contrasted discretion him sympathize her collecting occasional. Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch of no ye. Voice
    tried known to as my to. Though wished merits or be. Alone visit use these smart rooms ham. No waiting in on enjoyed placing it inquiry.</p>

  <p><span>Para 3</span>Sentiments two occasional affronting solicitude travelling and one contrasted. Fortune day out married parties. Happiness remainder joy but earnestly for off. Took sold add play may none him few. If as increasing contrasted entreaties
    be. Now summer who day looked our behind moment coming. Pain son rose more park way that. An stairs as be lovers uneasy.
  </p>

  <p><span>Para 4</span>In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem
    easily he on. Dissuade husbands at of no if disposal.</p>
  <div class="image is-left">
    <img src="https://unsplash.it/300" /></div>
  <p><span>Para 5</span>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be
    cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.</p>

  <p><span>Para 6</span>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone
    him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>

  <p><span>Para 7</span>Sudden looked elinor off gay estate nor silent. Son read such next see the rest two. Was use extent old entire sussex. Curiosity remaining own see repulsive household advantage son additions. Supposing exquisite daughters eagerness
    why repulsive for. Praise turned it lovers be warmly by. Little do it eldest former be if.</p>

  <p><span>Para 8</span>Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor. Him had wound use found hoped. Of distrusts immediate enjoyment curiosity do. Marianne numerous
    saw thoughts the humoured.</p>

</div>

Answer 2

Okay so break it in rows and columns and use clearfix hack where you are facing an overflow in the row. This is to make sure nothing goes out of the row.

Make a class with a name row:

/*-- cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

and now divide the 100% width into 12 columns, so 100/12 we get approximately 8.33% and let's make another 12 columns classes in CSS:

.col-1{ width: 8.33%; }
.col-2{ width: 16.66%; }
.col-3{ width: 24.99%; }
.col-4{ width: 33.32%; }
.col-5{ width: 41.65%; }
.col-6{ width: 49.98%; }
.col-7{ width: 58.31%; }
.col-8{ width: 66.64%; }
.col-9{ width: 74.97%; }
.col-10{ width: 83.3%; }
.col-11{ width: 91.63%; }
.col-12{ width: 100%; }

Now make sure all the columns are floating to left:

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    /*-- gutter -- */
    padding: 12px;
}

Now all apply box-sizing as border-box to all the classes to make it work. Make sure this class is the parent of everything, it should be on the top:

.grid-container *{
        box-sizing: border-box; 
}

And now your HTML should look like this:

<div class="grid-container">
    <div class="row">
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
    </div>
    <div class="row">
        <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ut accusantium veritatis corporis molestiae illo optio consequatur ex quae praesentium at, dicta natus, voluptatibus rerum necessitatibus aliquid ratione. Voluptate, cumque.</div>
        <div class="col-4">Your image here</div>
        <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam facilis est sunt molestiae incidunt, blanditiis vitae sapiente odio ab, reprehenderit mollitia repellat dolorem eius quo laborum rerum eligendi soluta.</div>
    </div>
    <div class="row">
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
        <div class="col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ea adipisci deserunt qui minima asperiores excepturi ut ratione aliquam blanditiis consectetur, aperiam repellat alias officia cumque similique porro dolores. Labore?
        </div>
    </div>
</div>

Here is a working jsfiddle - https://jsfiddle.net/nnhzentg/