0

I can't get my twittercontainer to sit on the right of srun and mentor and I cant seem to change the height of twittercontainer please help. I just need to understand how to get this simply layout of essentially two divs in a column with another div to the right.

I have tried just about every which way I can think of.

 <div class="newsbox">
      <div class="newboxcontent">
        <div class="srun">
        <img src="resources/sponsoredrun.jpg" align="left">

        <h1>Sponsored Run</h1>

        <h2>Six of our supporters ran 10k in Richmond on March 24th 2012 
            in order to raise money to help us continue our work. They 
            had 
            a great deal of fun and raised £1400! </h2>

      </div>

      <div class="mentor">
        <img src="resources/volunteermentors.jpg" align="left">
        <h1>Sponsored Run 2</h1>

        <h2>We are now accepting applications from those who would like 
            to take part in our next training course for volunteer 
           mentors which will take place in June 2012. Topics covered 
            will include: promoting choice and self awareness in young 
            people, reflective practice, confidentiality, anger and 
             aggression, substance misuse, the youth justice system,  
   </div>


    <div class="twittercontainer">

      <a class="twitter-timeline" href="https://twitter.com/BelongLondon?ref_src=twsrc%5Etfw">Tweets by BelongLondon</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    </div>

    .newsbox {
      display: flex;
      flex-flow: column;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .newboxcontent {

      flex-flow: column;
      display: flex;

    }

    .srun {
      padding right: 50px;
      padding bottom: 50px;
    }

    .srun h2 {
      font-size: 15px;
    }

    .srun img {
      padding: 20px;
    }

    .mentor h2 {
      font-size: 15px;
    }

    .mentor img {
      padding: 20px;
    }

    .mentor {
      padding-right: 50px;
      padding top: 100px;
    }


    .twittercontainer{
      width: 200px;
      height: 100px;

    }

    I just want the <twittercontainer> (twitter feed) to sit on the 
    right of the two other divs and stretch to the same height.
halfer
  • 19,824
  • 17
  • 99
  • 186
Sam Warman-Mendoza
  • 1
  • 2
  • Related if not Duplicate - https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid – Paulie_D Mar 29 '19 at 16:02
  • you forgot to close the h2 tag of the div mentor – Blank Mar 29 '19 at 16:51
  • It looks like the "srun" div is unclosed to, based on the indentation. I would advise repairing your indentation to make the divs, so you can see where you are missing close tag(s). – halfer Mar 29 '19 at 17:56

1 Answers1

0

Remove flex direction column from the outer most div .newsbox, you also dont want that wrapper to allow its children to wrap. As mentioned in some of the comments you were missing a few HTML closing tabs which usually introduces some unexpected result.

    .newsbox {
      display: flex;
    }

    .newboxcontent {
      flex-flow: column;
      display: flex;

    }

    .srun {
      padding right: 50px;
      padding bottom: 50px;
    }

    .srun h2 {
      font-size: 15px;
    }

    .srun img {
      padding: 20px;
    }

    .mentor h2 {
      font-size: 15px;
    }

    .mentor img {
      padding: 20px;
    }

    .mentor {
      padding-right: 50px;
      padding top: 100px;
    }


    .twittercontainer{
      width: 200px;
      height: 100px;

    }
 <div class="newsbox">
  <div class="newboxcontent">
    <div class="srun">
    <img src="resources/sponsoredrun.jpg" align="left">
      <h1>Sponsored Run</h1>
      <h2>Six of our supporters ran 10k in Richmond on March 24th 2012 in order to raise money to help us continue our work. They had a great deal of fun and raised £1400!</h2>
    </div>
    <div class="mentor">
      <img src="resources/volunteermentors.jpg" align="left">
      <h1>Sponsored Run 2</h1>
      <h2>We are now accepting applications from those who would like to take part in our next training course for volunteer mentors which will take place in June 2012. Topics covered will include: promoting choice and self awareness in young people, reflective practice, confidentiality, anger and aggression, substance misuse, the youth justice system</h2> 
    </div>
  </div>

  <div class="twittercontainer">
    <a class="twitter-timeline" href="https://twitter.com/BelongLondon?ref_src=twsrc%5Etfw">Tweets by BelongLondon</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>
BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16