How do I display paragraphs of text between two div elements that contain images?

Question

I'm having trouble putting the paragraphs in the middle of the page between my other div contents.

I have two div elements, one on the left and the other on the right, and I want the paragraphs to sit between both these div elements but I can't figure it out.

Right now the paragraphs are in the center of the page -- but they display below the div elements instead of being in between them.

I tried making the position of these paragraphs absolute but then the text would be all on top of each other so i tried adding margin to the paragraphs but that did not affect it so i went back to how it was.

p{
    color: white;
    float: center;
    text-align: center;
    display: inline-block;
    margin: 0 0 0 32vw;
    padding: 0;
    width: 15em;
    border: 1px solid white; 
    font-family: Verdana, Sans-Serif;
    font-size: 2.5em;
    line-height: 2em;
    overflow: hidden;
}

.TallPhotos{
    display: inline-block;
    float: right;
    max-width: 21vw;
    margin: 0;
    padding: 0;
    border: 1px solid green;
    overflow: hidden;
}

I included one div element, just in case.

Answer 1

Please use display:flex;

here is some code, i have tired, i hope this will be helpful for you.

<div class="container">
   <div class="content">
       <div class="image1">
          <img src="https://tinyjpg.com/images/social/website.jpg" alt="">
       </div>
         <div class="paragraph">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, a ad sequi. Voluptas enim veniam modi. Sapiente amet, quas quasi aliquid, velit perferendis optio voluptate earum adipisci eius itaque totam.</p>
          </div>
          <div class="image2">
              <img src="https://tinyjpg.com/images/social/website.jpg" alt="">
          </div>
    </div>
</div>

.container {
        width: 80%;
        margin: 0 auto;
    }
    .content
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-content: center;
    }
    .content .image1,
    .content .image2,
    .content .paragraph
    {
        width: 32%;
    }
    img
    {
        width: 100%;
    }

Answer 2

The simple thing to do is to use flexbox.

.flex-parent{display:flex;}

<div class="flex-parent">
    <div class="flex-child">
        <img src="http://placekitten.com/150/300" />
    </div>
    <div class="flex-child">
        <p>Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. </p>
    </div>
    <div class="flex-child">
        <img src="http://placekitten.com/150/300" />
    </div>
</div>

There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox.

Flexbox requires two things:

1. A parent container (e.g. DIV, section, aside, p, etc)

2. One or more child elements (e.g. div, p, img, etc)

You turn flexbox on on the parent: display:flex;

Then, there are various switches. Some are set on the parent (as in the case of justify-content) but others might be set on the items (as with flex-grow:1)

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox.

Watch the tutorial and in 40 mins from now your problem will be solved -- and you'll know flexbox.

_{P.S. I have no connection to the video or its presenter - I was fortunate to discover it, and now pass it along.}

Another great idea is to learn/use Bootstrap - its main claims to fame are: (a) to provide a responsive layout grid that you use to design your page *with the great benefit that your page will look great on all screen sizes and devices, and (b) to provide a number of easy-to-use tools that will make it easy to create modal dialog boxes, screen-spy scroll navigation, uniform buttons and color themes, etc.

Note that the primary change from Bootstrap3 to Bootstrap4 was redesigning the core grid system in flexbox. That gives you an idea how important flexbox is.

Answer 3

A thinking by me would be to add an master div. Get all 3 elements inside by order, img(div), paragraph, img(div). Then in CSS use on the master div:

display flex; justify-content:space-between;

This should get your right setup. From there play with the width of the elements and get em the way you like.

Cheers.

Answer 4

You can restructure your code to use three divs instead of two and a paragraph. Your center div can contain the paragraph:

.parent {
  display: flex;
}
.para {
   padding: 6px 12px;
}

<div class="parent">
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="para">
    <p>
    This is a paragraph
    </p>
  </div>
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
</div>