Creating a two-columnar magazine layout with CSS - 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/