Search code examples
csscss-floatcss-multicolumn-layout

Clear floating picture after heading when using 2 columns


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:

enter image description here

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

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


Solution

  • 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>