Clear floating picture after heading when using 2 columns

Question

I am trying to have my picture float to the right to text but when there is a header inside the text area I want the heading to start under the picture. I still want there to be two columns after the picture.

p img {
  float: right;
}

article h3 {
  clear: right;
}

<article>
  <h2>My current occupation</h2>
  <p>
    <img src="./Images/icons8-workstation-48.png" alt="computers"> Currently I am a student at Stockholm university. I am very happy to be more than half way through my bachelor program in computer science. This is my only occupation at the moment and
    my focus is on learning and preparing for working life.
  </p>
  <h3>test</h3>
  <p>

    I Have been learning how to code in Python, Java and also functional languages including Haskell. I am also learning math and my most recent course passed was multivariable calculus. This course was quite hard but looking back I think it gave me very
    good experience practicing to solve harder problems in a short amount of time and also to present math problems in front of an audience. The program also includes theory behind computer computation as well as software development design and methods.
    You can read more about my experiences and journey enrolling at university at page history.

  </p>

</article>

It looks like this:

To put text in two columns in an article I have this CSS:

article p {
    column-count: 2;
    margin: 1em;
}

You should consider to change a bit the markup, h3 is not allowed as content of a paragraph. — Fabrizio Calderan, Mar 06 '20 at 14:26
Oh yes I probably should close one
tag before starting a new heading. How could I keep the heading so it fits in the columns and also clear the picture ? @FabrizioCalderan — F Wi, Mar 06 '20 at 14:33

Pete · Accepted Answer · 2020-03-06T15:08:56.900

First fix your markup so you don't have a h3 in a p, then you can nest the content you want in columns in a div and put the columns onto that instead of the ps

img {
  float: right;
}

h3 {
  clear: right;
}

.columns {
  column-count: 2;
  margin: 1em;
}

<article>
  <h2>My current occupation</h2>
  <div class="columns">
    <p>
      <img src="https://www.fillmurray.com/50/50" alt="computers"> 
      Currently I am a student at Stockholm university. I am very happy to be more than half way through my bachelor program in computer science.
    </p>
    <h3>test</h3>
    <p>
      This is my only occupation at the moment and my focus is on learning and preparing for working life. I Have been learning how to code in Python, Java and also functional languages including Haskell. I am also learning math and my most recent course passed
      was multivariable calculus. This course was quite hard but looking back I think it gave me very good experience practicing to solve harder problems in a short amount of time and also to present math problems in front of an audience. The program
      also includes theory behind computer computation as well as software development design and methods. You can read more about my experiences and journey enrolling at university at page history.
    </p>
  </div>
</article>

Clear floating picture after heading when using 2 columns

1 Answers1